React Todo列表编辑功能问题：点击编辑后输入框无法加载任务信息

核心问题分析 #

你遇到的问题主要来自两个地方：

1. 状态更新的写法错误：handleEditOpen里的循环更新逻辑有问题，闭包导致每次更新都依赖初始状态，还错误地把key当作固定属性名而非动态键。另外函数参数不应是event，应该传入要编辑的任务对象。
2. 输入框未使用受控模式：用了defaultValue而非value，defaultValue仅在组件首次渲染时生效，后续状态变化不会同步到输入框。

修正步骤 #

1. 修复handleEditOpen函数

首先，点击编辑按钮时要传入对应的任务对象，而非事件。然后直接将任务对象合并到状态中，用函数式更新确保拿到最新状态：

// 编辑按钮的调用示例
<button onClick={() => handleEditOpen(currentTask)}>编辑</button>

// 修正后的handleEditOpen函数
function handleEditOpen(task) {
  // 合并任务对象到现有状态，覆盖对应字段
  setFormValue(prevState => ({
    ...prevState,
    ...task
  }));
  setEditDialogOpen(true);
}

如果任务对象包含formValue的所有属性，也可以直接替换状态：

setFormValue(task);

2. 把输入框改成受控组件

将defaultValue替换为value，绑定到formValue对应的字段：

<TextField
  required
  className="createItemCategoryTextfield"
  type="text" // 注意：type="category"不是标准HTML类型，建议改为text
  name="category"
  id="outlined-basic"
  variant="outlined"
  margin="normal"
  color="primary"
  label="Category"
  value={formValue.category} // 替换defaultValue为value
  onChange={handleInputChange}
  focused
/>

3. 确保handleInputChange正确更新状态

如果你的handleInputChange还没完善，参考下面的写法，根据输入框的name属性对应更新状态字段，同时处理priority的类型转换：

function handleInputChange(e) {
  const { name, value } = e.target;
  // priority是数字类型，需要把输入的字符串转成数字
  const inputValue = name === 'priority' ? Number(value) : value;
  
  setFormValue(prevState => ({
    ...prevState,
    [name]: inputValue
  }));
}

原写法失效原因 #

• 循环多次调用setFormValue：React状态更新是异步批量处理的，每次循环都依赖初始的formValue，最终只有最后一次更新生效；同时动态键名必须用[key]语法，否则会添加一个名为key的无效属性，而非对应字段名。
• defaultValue：这是非受控组件的属性，仅在组件第一次渲染时设置值，后续状态变化不会触发输入框更新，必须用value绑定状态才能实现双向同步。

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