如何让复选框与 React 一起使用？

Question

I'm having trouble getting my checkbox to work for my homework assignment. I know it has something to do with a unique key after I'm iterating through my object via jsx, but no matter what combinations I try, the checkbox doesn't work.

Object Code

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 code

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

handleChanges code

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

Answer 1

Looks like you need to pass todo.id as key. Your element key should not change over render. I recommend you to read the docs more carefully.