React StrictMode开启后useReducer控制样式切换功能失效求助

你遇到的问题本质是reducer函数不纯，存在直接修改原状态的副作用，和StrictMode的运行机制叠加后导致功能失效：

• React的StrictMode在开发环境下会故意重复调用reducer、状态更新函数等方法，目的是提前暴露这类不纯函数的问题
• 你的代码里const clone = [...listt.list]只是对list数组做了浅拷贝，数组内的clone[0]仍然和原状态里的listt.list[0]指向同一个对象引用
• 第一次执行reducer时，你修改clone[0].style会直接改动原状态里的对象值，第二次StrictMode触发的reducer执行时，判断的已经是被修改后的值，两次执行逻辑互相抵消，最终状态回到初始值，看起来就像切换功能失效
• 非StrictMode下reducer只会执行一次，不会触发抵消逻辑，所以看起来运行正常

只需要在修改list项时对对象也做深一层拷贝即可，保证完全不修改原状态，同时补充reducer的default分支避免状态丢失：

function reducer(listt, action) {
  switch (action) {
    case "toggle":
      console.log("hi");
      // 数组浅拷贝后，单独拷贝要修改的对象项，避免修改原状态
      const clone = [...listt.list];
      clone[0] = {
        ...clone[0],
        style: {
          color: clone[0].style.color === "blue" ? "red" : "blue"
        }
      };
      return { ...listt, list: clone };
    default:
      return listt;
  }
}

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