如何正确更新 React 中的嵌套状态属性？

修改 React 中的嵌套状态属性

嵌套状态属性为 React 中的复杂状态结构提供了逻辑组织。但是，尝试直接使用 this.setState 更新这些属性不会产生所需的结果。

解决方案：

要正确更新嵌套状态属性，请按照以下步骤操作保持状态的不变性：

1. 创建一个复制：

   • 使用扩展运算符将嵌套属性复制到新变量中，例如 var someProperty = {...this.state.someProperty}.

2. 修改复制：

   • 对复制的属性进行必要的更改，例如 someProperty.flag = true。

3. 更新状态：

   • 更新通过将组件的状态设置为修改后的副本，例如 this.setState({someProperty}).

对于高度嵌套的状态：

如果状态嵌套很深，则在每个级别使用扩展运算符是不切实际的。考虑使用 immutability-helper 包进行更优雅的更新：

this.setState(prevState => ({
  ...prevState,
  someProperty: {
    ...prevState.someProperty,
    someOtherProperty: {
      ...prevState.someProperty.someOtherProperty,
      anotherProperty: {
        ...prevState.someProperty.someOtherProperty.anotherProperty,
        flag: false
      }
    }
  }
}));

Immutability-Helper：

immutability-helper 包提供了更简洁直观的语法更新嵌套状态属性：

import {update} from "immutability-helper";
this.setState(update(this.state, {
  someProperty: {
    someOtherProperty: {
      anotherProperty: {
        flag: {$set: false}
      }
    }
  }
}));

以上是如何正确更新 React 中的嵌套状态属性？的详细内容。更多信息请关注PHP中文网其他相关文章！