调用setState更新嵌套对象时状态未正确更新的问题

我太懂这个问题了！你遇到的是React类组件里异步setState批量更新的经典坑——你当前用的是对象式更新，每次修改都依赖this.state[fieldset]，但短时间多次调用时，React会把这些更新攒在一起批量处理，this.state还没来得及更新，导致后面的修改会覆盖前面的，最终状态只保留最后一次的变更。

举个具体的例子：假设你连续调用两次change('user', 'name', 'Alice')和change('user', 'age', 25)，两次更新都是基于同一个旧的this.state.user对象来展开，结果第二次的展开会完全覆盖第一次的修改，最终name还是原来的值，只有age被更新了。

核心解决方案：改用函数式 setState #

React提供了函数式的setState写法，它会接收上一次更新后的最新状态作为参数，让你基于这个可靠的状态来生成新值，彻底避免覆盖问题。修改后的代码如下：

change = (fieldset, field, data) => {
  this.setState(prevState => ({
    [fieldset]: {
      ...prevState[fieldset],
      [field]: data
    }
  }))
}

这里的prevState是React保证的、每次更新时的最新状态，不管你短时间调用多少次change，每一次修改都会基于上一次的结果来合并，所有字段的变更都会被正确保留。

额外优化建议 #

• 如果你的子组件是类组件，可以给它们加上React.PureComponent或者用React.memo包裹（函数组件），减少不必要的重渲染，提升性能——这不是解决状态异常的必要步骤，但能让你的表单交互更流畅。
• 如果你后续迁移到函数组件，同样的逻辑可以用useState的函数式更新实现：

  const [user, setUser] = useState({ name: '', age: 0 });
  const change = (field, data) => {
    setUser(prev => ({ ...prev, [field]: data }));
  };
  

内容的提问来源于stack exchange，提问作者Toby