如何解决React中setState触发两次渲染导致状态回退的问题？

问题根源 #

1. React严格模式会两次调用状态更新函数，用来检测不纯的更新逻辑。你的更新函数依赖了外部的item变量，两次调用时item都是旧状态的值，导致布尔值被连续取反两次，最终回到初始状态。
2. 直接修改数组中对象的属性（prevAux[pos].checked = !prevAux[pos].checked）属于篡改旧状态，不符合React不可变更新的原则，可能引发其他渲染异常。

修复方案 #

1. 让状态更新函数保持纯函数，不依赖外部变量 #

给每个待办项添加唯一id（比如自增ID或uuid），在更新时通过id精准匹配目标项，而非依赖外部的item引用。

2. 采用不可变更新方式 #

不要直接修改原对象，而是创建新的对象副本，修改属性后替换数组中的对应项。

修改后的状态更新函数：

const updateCheck = () => {
  setTodoList((prev) => {
    // 用map遍历，匹配id后返回新对象
    return prev.map(todo => {
      if (todo.id === item.id) {
        return { ...todo, checked: !todo.checked };
      }
      return todo;
    });
  });
};

补充说明 #

如果你临时想验证问题是否来自严格模式，可以去掉入口文件中的<StrictMode>标签，此时更新函数只会执行一次，问题会暂时消失。但更推荐保留严格模式并修复更新逻辑，因为它能帮你提前发现代码中的潜在问题。

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