ReactJS -使用.setState更改嵌套值

在ReactJS中，.setState 方法用于更新组件的状态。当需要更新嵌套对象的值时，直接使用 .setState 可能会导致一些问题，因为React的状态更新可能是异步的，并且直接修改嵌套对象可能不会触发组件的重新渲染。

基础概念

状态（State）：在React组件中，状态是一个对象，它保存了组件内部的数据，这些数据可能会随着时间而变化。

setState：这是一个方法，用于更新组件的状态，并且通常会触发组件的重新渲染。

类型

.setState 可以接受两种类型的参数：

对象：直接传递一个对象，该对象的键值对将合并到当前状态。
函数：传递一个函数，该函数接收前一个状态作为第一个参数，当前的props作为第二个参数，并返回一个新的状态对象。

应用场景

当你需要更新嵌套对象的某个属性时，应该使用函数形式的 .setState，以确保获取到最新的状态。

遇到的问题及原因

如果你尝试直接修改嵌套对象的属性，比如：

this.state.nestedObject.innerValue = newValue;
this.setState({ nestedObject });

这样做可能不会触发组件的重新渲染，因为React无法检测到对象属性的变化。

解决方法

使用函数形式的 .setState 来确保获取到最新的状态，并创建一个新的对象来触发重新渲染：

this.setState(prevState => ({
  nestedObject: {
    ...prevState.nestedObject,
    innerValue: newValue
  }
}));

这里使用了对象展开语法（spread syntax）来复制前一个状态中的 nestedObject，然后更新 innerValue 属性。

示例代码

假设我们有一个组件，其状态包含一个嵌套对象：

class MyComponent extends React.Component {
  state = {
    user: {
      name: 'John',
      address: {
        city: 'New York',
        zip: '10001'
      }
    }
  };

  updateCity = (newCity) => {
    this.setState(prevState => ({
      user: {
        ...prevState.user,
        address: {
          ...prevState.user.address,
          city: newCity
        }
      }
    }));
  };

  render() {
    return (
      <div>
        <p>{this.state.user.address.city}</p>
        <button onClick={() => this.updateCity('Los Angeles')}>Change City</button>
      </div>
    );
  }
}

在这个例子中，当点击按钮时，updateCity 方法会被调用，它使用函数形式的 .setState 来更新 user 对象中的 address.city 属性，确保组件能够正确地重新渲染。