React useReducer钩子TOGGLE_TODO动作实现问题求助

嘿，我看到你在使用useReducer处理Todo应用的状态切换时遇到了问题，咱们来一步步拆解并解决它！

核心问题分析 #

你的TOGGLE_TODO分支代码存在几个关键问题，这导致了状态没有正确更新，甚至出现Todo消失的情况：

1. 未返回状态更新结果：你在Object.keys(state.todos).map()的回调里返回了新状态，但整个case ACTIONS.TOGGLE_TODO:分支没有return这个处理结果，导致reducer执行到这里时返回undefined，直接破坏了状态结构。
2. 误用map方法：map是数组遍历方法，用来返回新数组，但你这里需要的是构建一个新的todos对象。而且即使你return了map的结果，每次遍历不匹配key时返回原state，最后只会保留最后一次遍历的结果，逻辑完全错误。
3. 丢失Todo原有属性：你更新时只设置了complete: true，没有保留原Todo的todo文本，这会导致点击后Todo内容直接消失。

修正后的解决方案 #

我们可以用两种简洁的方式实现正确的状态切换，确保每次都返回新的状态对象，同时保留原有属性：

方式一：使用Object.entries + Object.fromEntries（适合批量处理场景）

const reducer = (state, action) => {
  switch (action.type) {
    case ACTIONS.TOGGLE_MODAL:
      return { ...state, isOpen: !state.isOpen };
    case ACTIONS.ADD_TODO:
      return { 
        ...state, 
        todos: { 
          ...state.todos, 
          [Date.now()]: { todo: action.payload.todo, complete: false } 
        } 
      };
    case ACTIONS.TOGGLE_TODO:
      // 将todos对象转为键值对数组，遍历处理后再转回对象
      const updatedTodos = Object.fromEntries(
        Object.entries(state.todos).map(([key, todo]) => {
          if (key === action.payload) {
            // 扩展原todo对象，切换complete状态，保留原有属性
            return [key, { ...todo, complete: !todo.complete }];
          }
          return [key, todo]; // 不匹配的key直接返回原todo
        })
      );
      return { ...state, todos: updatedTodos };
    default:
      throw new Error("Nope. not working");
  }
};

方式二：直接定位目标Todo更新（更高效，适合单个更新场景）

const reducer = (state, action) => {
  switch (action.type) {
    case ACTIONS.TOGGLE_MODAL:
      return { ...state, isOpen: !state.isOpen };
    case ACTIONS.ADD_TODO:
      return { 
        ...state, 
        todos: { 
          ...state.todos, 
          [Date.now()]: { todo: action.payload.todo, complete: false } 
        } 
      };
    case ACTIONS.TOGGLE_TODO:
      const targetKey = action.payload;
      // 先判断目标Todo是否存在，避免无效更新
      if (!state.todos[targetKey]) return state;
      
      return {
        ...state,
        todos: {
          ...state.todos,
          // 扩展原Todo对象，切换complete状态
          [targetKey]: { ...state.todos[targetKey], complete: !state.todos[targetKey].complete }
        }
      };
    default:
      throw new Error("Nope. not working");
  }
};

关键注意事项 #

• reducer必须是纯函数：永远不要直接修改原state对象，必须返回一个新的对象（通过扩展运算符...实现浅拷贝，深层属性也要单独扩展）。
• 每个case都要有return：如果某个case没有return，会导致reducer返回undefined，直接破坏状态结构，这就是你遇到Todo消失的原因之一。
• 保留原有属性：更新Todo时一定要扩展原对象，不要只设置complete，否则会丢失todo文本等其他属性。

这样修改后，你的TOGGLE_TODO动作就能正确切换Todo的完成状态，同时保持状态的稳定性，为后续复杂状态的处理打好基础。

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