React使用componentDidUpdate时prevProps与props/prevState与state值相同如何排查

核心原因：你并没有真正实现不可变更新 #

你虽然通过[...this.state.counters]创建了新的数组实例，但是数组内部的每个counter对象仍然复用了原state中的引用，你在map遍历中直接修改counter.value属于修改原对象的操作，会同时改动prevState和当前state中对应的对象值，所以在componentDidUpdate中对比时会看起来完全一致。

修复你的代码 #

需要在修改对象属性时返回全新的对象实例，彻底切断引用共享：

1. 修复resetHandler #

resetHandler = () => {
  const newCounters = this.state.counters.map((counter) => {
    // 返回新对象，不修改原引用
    return { ...counter, value: 0 };
  });
  this.setState({ counters: newCounters });
};

2. 修复incrementHandler #

incrementHandler = (id) => {
  const newCounters = this.state.counters.map((counter) => {
    if (counter.id === id) {
      return { ...counter, value: counter.value + 1 };
    }
    return counter;
  });
  this.setState({ counters: newCounters });
};

其他可能导致该问题的原因 #

• 浏览器控制台引用滞后：直接打印引用类型（对象/数组）时，浏览器不会在打印瞬间快照值，而是在你手动展开控制台条目时才读取最新值，就会出现prev和当前值看起来一样的错觉。可以打印具体基础类型值比如console.log(prevState.counters[0].value, this.state.counters[0].value)验证，或者用console.log(JSON.stringify(prevState))打印快照。
• 自定义shouldComponentUpdate返回false，或者组件继承自PureComponent且state/props引用没有变化，此时componentDidUpdate根本不会触发，如果你是在其他地方打印值可能会混淆。
• setState传递的新值和原有state完全没有变化，React会自动跳过状态更新，此时也不会触发componentDidUpdate。

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