React useReducer无法更新数组中的对象问题排查

你遇到的问题是在使用React的useReducer更新数组中对象的complete属性时，通过取反!patch[action.payload.index].complete的方式修改后，控制台打印看似成功，但组件并没有更新状态；而直接赋值为true时却能正常生效。

问题根源 #

这是因为你虽然复制了数组（const patch = [...state];），但数组中的对象是引用类型——patch里的对象和原state里的对象指向的是同一个内存地址。当你直接修改patch[action.payload.index].complete时，你其实是在修改原状态中的对象，而非创建一个全新的对象。

React的useReducer（和useState一样）依赖浅比较判断状态是否变化：它只会检查新状态与旧状态的引用是否不同。虽然你创建了新的数组引用，但数组内的对象引用没有改变，React无法可靠地检测到状态的变化，自然不会触发组件重新渲染。而直接赋值true时的“有效”只是偶然情况，本质上同样违反了不可变状态的原则，是不可靠的。

正确解决方案 #

更新引用类型状态时，必须创建新的副本，而不是直接修改原数据。针对TOGGLE_TODO的场景，你可以使用map方法遍历数组，为目标索引的对象创建新副本并修改属性：

function reducer(state, action) {
  switch(action.type) {
    case ACTIONS.ADD_TODO:
      return [...state, {id: Date.now(), name: action.payload.name, complete: false}];
    case ACTIONS.TOGGLE_TODO:
      // 使用map创建新数组，目标对象生成新副本
      return state.map((todo, idx) => {
        if (idx === action.payload.index) {
          return { ...todo, complete: !todo.complete };
        }
        return todo;
      });
    default:
      return state; // 别忘了添加default case，避免意外情况
  }
}

为什么这样有效？ #

• map方法返回了一个全新的数组引用，满足React对状态变化的检测要求。
• 目标对象通过{...todo, complete: !todo.complete}创建了新的对象副本，修改后的属性被包含在新引用中，React能清晰识别到状态变化，从而触发组件重新渲染。

额外优化建议 #

1. 始终为reducer添加default分支，返回原状态，避免未匹配到action时返回undefined导致错误。
2. 在Todo2组件中，建议通过todo.id来定位目标项，而不是依赖数组索引——数组索引可能会因增删操作变化，使用唯一ID更可靠：
   • 修改dispatch时传递id而非index：

     // Todo2组件中
     <button onClick={() => dispatch({type: ACTIONS.TOGGLE_TODO, payload: {id: todo.id}})}>Toggle</button>
     

   • 调整reducer中的逻辑：

     case ACTIONS.TOGGLE_TODO:
       return state.map(todo => {
         if (todo.id === action.payload.id) {
           return { ...todo, complete: !todo.complete };
         }
         return todo;
       });
     

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