React Todo使用useReducer时如何实现TOGGLE_TODO切换completed状态

完整的case代码 #

直接替换你reducer中ACTIONS.TOGGLE_TODO对应的空分支即可：

case ACTIONS.TOGGLE_TODO:
  return {
    ...state,
    todos: state.todos.map((todo) => {
      // 匹配到对应ID的待办项时取反completed属性
      if (todo.id === action.payload.id) {
        return { ...todo, completed: !todo.completed }
      }
      // 其余待办项原样返回
      return todo
    })
  }

逻辑说明 #

• 必须使用map返回全新的todos数组，不能直接修改原state中的数组，React依赖状态引用变化触发视图更新
• 匹配到目标待办项时要先展开原todo对象的所有属性，再覆盖completed的值，避免丢失todo的其他字段

效果补充（可选） #

如果要直观展示完成状态，修改Todo组件的li标签，根据completed值切换样式即可：

<li className={todo.completed ? tdstyle.completed : ''}>{text}</li>

在你的Todo.module.css中补充对应样式：

.completed {
  text-decoration: line-through;
  opacity: 0.7;
}

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