如何让复选框与 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。