如何更新 ReactJS 中的嵌套状态属性？

在 ReactJS 中，组件的状态（state）可能包含一个或多个嵌套属性。为了更新这些嵌套属性，我们需要先获取到它们，然后使用 setState 方法来更新它们。

获取嵌套属性

假设有以下组件：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      user: {
        name: 'Alice',
        age: 30
      }
    };
  }

  render() {
    return (
      <div>
        <p>Name: {this.state.user.name}</p>
        <p>Age: {this.state.user.age}</p>
      </div>
    );
  }
}

要更新 user 对象中的嵌套属性，我们首先需要获取到它们。假设我们想要更新 user 对象中的 age 属性，我们可以像这样：

const user = this.state.user;
const age = user.age;

这将会创建一个名为 user 的变量，它的值是当前组件的状态中的 user 属性。然后，我们可以通过 user.age 来获取 age 属性的值。请注意，这里我们只是获取了对象和属性的引用，在下一步中，我们才会真正更新它。

更新嵌套属性

一旦我们获取到了嵌套属性的引用，我们就可以使用 setState 方法来更新它们。假设我们想要将 age 属性的值增加 1，我们可以这样写：

this.setState({
  user: {
    ...this.state.user,
    age: this.state.user.age + 1
  }
});

在这里，我们使用了 spread 运算符来复制 user 对象，并将新的 age 属性设置为原始值加上 1。然后，我们将这个新的 user 对象传递给 setState 方法，React 将会使用它来更新组件的状态。

请注意，在这里我们使用了对象解构（object destructuring）和对象扩展符（object spread）。如果你还不熟悉这些语法，建议先去学习一下。

完整代码示例

下面是一个完整的代码示例，可以在其中测试如何更新嵌套状态属性：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      user: {
        name: 'Alice',
        age: 30
      }
    };
  }

  handleClick = () => {
    const user = this.state.user;
    const age = user.age;

    this.setState({
      user: {
        ...user,
        age: age + 1
      }
    });
  };

  render() {
    return (
      <div>
        <p>Name: {this.state.user.name}</p>
        <p>Age: {this.state.user.age}</p>
        <button onClick={this.handleClick}>Update Age</button>
      </div>
    );
  }
}

这个组件会在页面上显示当前 user 对象中的 name 和 age 属性。当用户点击按钮时，age 属性的值会增加 1，并更新组件的状态。