React待办列表勾选任务时，下方任务也被勾选的问题排查

核心原因 #

• 列表渲染未加唯一key：React渲染列表时，必须给每个子组件分配唯一的key属性。你当前代码里没有加key，React会根据元素在列表中的位置来复用组件。当勾选第一个任务并移除它后，原第二个任务会移到第一个位置，React会直接复用之前第一个任务的Checkbox组件，导致它的勾选状态被继承，看起来就像下面的任务被自动勾选了。

• 直接修改原状态对象：在completeTask函数里，你直接执行了task.isChecked = true，这是直接修改了React状态数组里的原对象（React要求状态必须是不可变的，不能直接修改原数据）。这种操作会让状态更新逻辑混乱，再加上没有key的问题，就导致了错误的勾选表现。

修复代码 #

1. 给列表项添加唯一key：

{tasks.map(t => 
    <Task 
        key={t.title} // 这里用title作为唯一标识，实际项目建议用更可靠的唯一ID（比如uuid）
        title={t.title} 
        onChecked={() => completeTask(t)} 
        additionalStyles={{backgroundColor: t.color}}
    />
)}

2. 改用不可变方式更新状态：

const completeTask = (task) => {
    // 使用函数式更新获取最新状态，同时不修改原对象
    setTasks(prevTasks => prevTasks.filter(item => item.title !== task.title));
}

补充说明 #

如果需要保留已完成任务的状态（而非直接过滤掉），可以先创建新数组标记任务状态，再过滤：

const completeTask = (task) => {
    setTasks(prevTasks => {
        const updatedTasks = prevTasks.map(item => 
            item.title === task.title ? {...item, isChecked: true} : item
        );
        return updatedTasks.filter(item => !item.isChecked);
    });
}

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