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

Question

我无法让我的复选框适合我的家庭作业。我知道在通过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
        });
      };

Answer 1

好像您需要传递todo.id作为密钥。您的元素键不应更改为渲染。我建议您仔细阅读docs。