我如何获得复选框以与React一起使用?

我无法让我的复选框适合我的家庭作业。我知道在通过jsx遍历对象后,它与唯一键有关,但是无论我尝试哪种组合,该复选框均不起作用。

目标码


export const initialTodoState = [{

    item:"Learn about reducers",
    complete: false,
    id: Date.now()

},

{

    item: "Learn Redux",
    complete: false,
    id: Date.now()
},

{

    item: "Learn UX design",
    complete: false,
    id: Date.now()
}
];

ul码

         <ul>
             {filteredTodos.map((todo) => (
          <li key={cuid()}>
            <label>
              <input
              type="checkbox"
                checked={todo.complete}
                onChange={() => handleChanges(todo)}
              />
              {todo.item}
            </label>
          </li>
        ))}
      </ul>

handleChanges代码


const handleChanges = todo => {
        dispatch({
          type: todo.complete ? 'UNDO_TODO' :'DO_TODO'  ,
          id: todo.id
        });
      };