React JS使用useReducer点击后无法更新值及UPDATE_TODO转换问题

1. TOGGLE_TODO动作触发后状态不更新问题 #

两次尝试未生效的原因分别如下：

• 第一次尝试存在两个核心错误：
  1. 索引取值逻辑错误：let targetId = todoItem[action.index]取到的是对应位置的完整todo对象，并非数字下标，后续将该对象作为数组下标访问元素属于非法操作。
  2. reducer返回值不符合规范：reducer必须返回完整的全新状态，你最终返回的是赋值表达式newTodo[targetId].completed = !newTodo[targetId].completed的计算结果（一个布尔值），会直接将整个todo列表状态替换为布尔值，导致列表渲染崩溃。同时该写法直接修改了原数组内的对象引用，违反状态不可变原则，即使修正返回值也容易引发React不触发重渲染的问题。
• 第二次尝试的reducer逻辑本身写法正确，不生效的核心原因是传参类型不匹配：
  你通过event.target.value拿到的索引值是字符串类型，而数组遍历时生成的index是数字类型，全等判断"0" === 0返回结果为false，永远无法匹配到需要修改的todo项，因此状态无变化。

修正方案：优先直接使用渲染闭包内的数字索引传参，避免从event取值带来的类型问题，对应按钮代码修改如下：

<button
  onClick={() =>
    dispatch({
      type: TOGGLE_TODO,
      index: index,
    })
  }
>
  {todo.completed ? "done" : "pending"}
</button>

如果需要从event取值，手动将值转为数字类型即可：index: Number(event.target.value)。修正后你第二次写的map形式reducer逻辑可以正常运行。

2. UPDATE_TODO逻辑的useReducer实现 #

原useState版本的逻辑共做了两件事：将选中todo的内容填充到输入框、记录当前正在编辑的todo索引。用useReducer实现时需要将这两个关联状态和todo列表统一纳入reducer管理，不要拆分独立的useState。

1. 首先定义整合后的初始状态：

const initialState = {
  todoItem: [], // todo列表数据
  inputValue: "", // 输入框绑定值
  editingIndex: -1, // 当前正在编辑的todo索引，-1表示无编辑项
};

2. 在reducer中新增UPDATE_TODO的处理逻辑：

case UPDATE_TODO:
  const targetIndex = action.index;
  return {
    ...state,
    inputValue: state.todoItem[targetIndex].name,
    editingIndex: targetIndex,
  };

3. 触发编辑的按钮直接调用dispatch即可，无需再写多个setState调用：

<button
  onClick={() => dispatch({
    type: UPDATE_TODO,
    index: index
  })}
>
  编辑
</button>

后续实现编辑提交、取消编辑功能时，只需要在reducer中新增对应action case，统一修改三个关联状态字段即可，所有状态更新逻辑收敛在reducer中，可维护性远高于分散的useState写法。

内容的提问来源于stack exchange，提问作者Tom-Cat