Reactjs Redux复选框列表中的第二项每次切换时都在更改

所以基本上，未检查和检查现在在redux中工作，我已经在api请求中实现了它。但是问题是，当我点击复选框时，下面的第二项也被更改了

我检查了todo，因为它已经完成了 然后我检查的todo中下面的todo也被检查了，不知道为什么

下面的代码用于完整的todo函数。我并没有包括不完整的todo，因为它们都有相同的逻辑，并且它们在复选框上都做相同的操作

导出默认函数CompletedTodos（{todos}）{
const dispatch=usedpatch（）；
const ontogle=useCallback（id=>dispatch（incomplettetodo（id）），[dispatch]）；
const todoComplete=todos.filter（t=>t.completed）
返回；
}

const Todos=（{Todos，completeTodo}）=>(
{todo.map（（todo，index）=>(
completeTodo（todo.id）}/>
))}
);
导出默认TODO；

const Todo=（{onClick，id，completed，title}）=>(

{已完成？：}
{title}

看法




);

从“React”导入React；
常量CompleteTodo=（{onClick，completed}）=>{
返回(
);
}
导出默认CompleteTodo；

感谢Jayce444在这方面的帮助

答复

---

对于更新的列表，切勿使用索引作为键。使用todo.id，因为它是更新列表的唯一标识符

，所以不要将索引用作键。使用

todo.id

，因为它是唯一的标识符

export default function CompletedTodos( { todos } ){
  const dispatch = useDispatch();
  const onToggle = useCallback(id => dispatch(incompleteTodo(id)), [dispatch]);
  const todoComplete = todos.filter(t => t.completed)
  return <Todos todos={todoComplete} completeTodo={onToggle} />;
}

const Todos = ({ todos, completeTodo }) => (
  <span>
    {todos.map((todo, index) => (
        <Todo key={index} {...todo} onClick={() => completeTodo(todo.id)} />
    ))}
  </span>
);

export default Todos;

const Todo = ({ onClick, id, completed, title }) => (
    <li className={`task-info ui-sortable-handle ${completed ? "line-through" : "none"}`} id="task17">
        {completed ? <CompleteTodo completed={true} onClick={onClick} /> : <IncompleteTodo id={id} completed={false} onClick={onClick} />}

        {title}
        <div className="clearfix"></div>
        <div className="mt-3">
            <p className="float-right mb-0 mt-2">
                <button type="button" className="btn btn-success btn-sm waves-effect waves-light">View</button>
            </p>
            <p className="mb-0">
                <a href="" className="text-muted"><img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="task-user" className="thumb-sm rounded-circle mr-2" /> <span className="font-bold font-secondary">Maya Didas</span></a>
            </p>
        </div>
    </li>
);

import React from "react";

const CompleteTodo = ({ onClick, completed }) => {
    return (
        <div className="checkbox checkbox-custom checkbox-single float-right">
            <input type="checkbox" aria-label="Single checkbox Two" onClick={onClick} defaultChecked={completed}/>
            <label></label>
        </div>
    );
}

export default CompleteTodo;