React中componentDidUpdate的prevState为何与当前state一致？

兄弟，这真不是React的Bug，是你修改state的方式踩坑啦！

核心问题：直接突变了state对象 #

你看你写的modifyObject方法：

modifyObject = (field, value) => {
  const { object } = this.state;
  object[field] = value;
  this.setState({ object });
}

这里的object是直接从this.state里解构出来的原对象引用，你直接修改object[field] = value属于「直接突变(mutation)」——相当于你直接改了React管理的state内存里的内容，然后setState的时候又把同一个引用传回去了。

React判断state是否变化用的是浅比较：它只会检查state里的属性引用有没有变，不会深入对比对象内部的属性值。因为你传的object和之前的引用完全一样，React就会认为「state没变化」，不会触发正确的状态更新流程，这就导致prevState.object和this.state.object指向的是同一个内存对象，自然永远相等，你的console.log(true)也就不会执行了。

正确的修改方式：保持state不可变 #

要解决这个问题，你需要创建一个新的对象引用，再通过setState更新，推荐两种写法：

写法1：使用扩展运算符（ES6+，最常用）

modifyObject = (field, value) => {
  this.setState(prevState => ({
    object: {
      ...prevState.object, // 拷贝原对象的所有属性
      [field]: value // 覆盖要修改的字段
    }
  }));
}

这里用了函数式的setState（接收prevState作为参数），能确保我们拿到的是最新的state，然后通过扩展运算符把原object的属性复制到新对象里，再修改目标字段——这样新的object是一个全新的引用，React就能检测到状态变化了。

写法2：使用Object.assign

如果你的环境不支持扩展运算符，也可以用Object.assign：

modifyObject = (field, value) => {
  this.setState(prevState => ({
    object: Object.assign({}, prevState.object, { [field]: value })
  }));
}

效果和扩展运算符一样：先创建一个空对象，把原object的属性拷贝进去，再覆盖要修改的字段，生成新的对象引用。

补充说明 #

至于你试的componentWillUpdate（现在React更推荐用getSnapshotBeforeUpdate或者直接在componentDidUpdate里处理）出现同样的问题，原因也是一样的——因为nextState.object还是原对象的引用，和当前state.object是同一个，所以对比起来自然相等。

记住：React的state设计理念是**不可变(Immutable)**的，永远不要直接修改state里的对象/数组，必须通过创建新的引用或者拷贝来更新，这样React才能正确触发生命周期和重新渲染~

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