React Redux触发TODO_DONE后todo的done字段仍为false如何解决

问题原因 #

核心不匹配问题：
你的reducer中TODO_DONE分支期望action.payload是待办项的id值，判断逻辑为todo.id === action.payload。但你在组件调用doneTodo时传入的是整个todo对象，导致判断永远为false，不会触发任何todo项的done字段更新。

修复方案 #

二选一即可，推荐第一种符合通用开发规范：

1. 调整组件传参，仅传入待办项id
   修改按钮点击逻辑：

<button onClick={() => doneTodo(todo.id)}>Done</button>

2. 调整reducer匹配逻辑，适配传入整个todo的写法
   修改reducer判断条件：

case "TODO_DONE":
  return state.map((todo) => {
    if (todo.id === action.payload.id) {
      return {
        ...todo,
        done: true,
      };
    }
    return todo;
  });

额外优化点 #

你的TodoList组件参数写法存在多余项：const TodoList = ({ todoss, deleteTodoAction, doneTodo }, props)，函数式组件仅第一个参数为props对象，你已经完成了解构，第二个props参数无任何作用可直接删除。

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