React多待办列表项目中新增任务不渲染且状态重复更新问题求助

我来帮你排查下这个问题，你的代码里有几个关键细节没处理好，咱们一个个解决：

1. 新任务不渲染的核心原因 #

看你的TodoList组件里的任务渲染部分，你在map遍历的时候没有返回Task组件，所以即使状态更新了，页面也不会渲染出新任务。

原代码：

{tasks.map((task) => {
    <Task text={task} />
})}

改成下面这样（记得给每个列表项加唯一key，React需要它来识别列表项的变化）：

{tasks.map((task, idx) => (
    <Task key={idx} text={task} />
))}

或者显式写return也可以：

{tasks.map((task, idx) => {
    return <Task key={idx} text={task} />
})}

2. 状态重复更新、异常的根源：直接修改原状态对象 #

React的状态更新必须遵循不可变原则，你在handleAddTask里直接修改了原状态数组里的对象，导致React无法正确检测到状态变化，才出现了重复更新的奇怪现象。

原代码：

function handleAddTask(task, index) {
  setMasterTable((prev) => {
    let prevRows = prev[index].tasks;
    const newRows = [...prevRows, task];
    let prevTable = prev; // 直接引用原状态数组，和原引用完全一致
    prevTable[index].tasks = newRows; // 直接修改原数组内的对象
    return prevTable; // 返回原引用，React会误以为状态没变化
  });
}

改成完全不可变的更新方式，每次都返回新的数组和对象：

function handleAddTask(task, index) {
  setMasterTable((prev) => {
    return prev.map((item, idx) => {
      // 只修改目标索引对应的项目
      if (idx === index) {
        return {
          ...item, // 复制原项目的所有属性
          tasks: [...item.tasks, task] // 生成新的tasks数组，不修改原数组
        };
      }
      // 其他项目保持原样返回
      return item;
    });
  });
}

3. 小优化：避免空任务+清空输入框 #

用useRef获取输入值是没问题的，但可以加个小判断避免添加空任务，同时点击添加后清空输入框，提升用户体验：

<button onClick={() => {
    const task = taskInput.current.value.trim();    
    if (task) { // 只有输入非空时才添加任务
        addTask(task, index);
        taskInput.current.value = ''; // 清空输入框
    }
}} className="rounded-lg p-2 ml-2 text-stone-600 h-9 mt-5 w-fit">Add Task</button>

把这些修改完成后，应该就能解决任务不渲染和状态重复更新的问题啦～

备注：内容来源于stack exchange，提问作者TroglodyteTerry