React中setState配合if语句使用无法更新状态的问题咨询

你的问题本质是违反了React的状态不可变原则，加上setState更新函数的执行特性共同导致的：

• [...prevState.items]属于浅拷贝，仅创建了新的数组实例，数组内存储的所有对象仍然和prevState.items中的对象共用引用。你直接修改copyItems[index].done时，实际上已经偷偷修改了prevState中的原有状态，这是React明确禁止的操作。
• React的setState的updater回调函数，在批量更新、并发模式等场景下可能会被调用多次，用来保证状态更新的正确性。你提前修改了prevState的原有值，第一次执行updater时把done改成了目标值，第二次执行的时候prevState里的done已经被第一次执行改完了，if判断就会走到相反的分支又改回初始值，最终返回的状态和修改前一致，看起来就像没更新。
• 不带if的版本看起来能正常运行是巧合：你不管原有值是什么，强制把done设为true，就算updater执行多次，每次都是设置为true，最终结果刚好符合预期，但本质仍然是错误的写法，在复杂场景下依然会出问题。
• 深拷贝版本能正常运行的原因是：JSON.parse(JSON.stringify())做了深拷贝，数组内的对象也是全新的实例，修改的时候完全不会影响prevState的原有值，不管updater执行多少次，判断逻辑都是基于原始的prevState值，所以结果正确。

不需要做全量深拷贝，只需要给要修改的对象创建新实例即可，性能更高也符合React规范：

this.setState((prevState) => {
  return {
    items: prevState.items.map((item, i) => {
      if (i === index) {
        // 仅修改目标下标的对象，创建新实例
        return {...item, done: !item.done}
      }
      // 未修改的对象直接复用原有引用即可
      return item
    })
  }
})

另外注意你的render逻辑里状态和显示的判断写反了，item.done ? "- is not done" : "- is done"会导致状态和显示文本相反，也容易让你误以为更新失败，建议调整为对应逻辑。

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