Javascript react 从列表中删除复选框项目，奇怪的行为

您缺少任务组件中的键，并且使用的是不受控制的组件，因此在重新渲染时，您没有充分说明DOM中存在的哪个元素对应于哪个<Task>.最好的解决方法是:

• 使用受控部件，而不是非受控部件；组件通常更具可预测性，并且可用于状态，因为视图应该来自状态.(如果使用受控组件，也可以避免求助于ref).可以控制文本输入和复选框.
• 从.map返回时使用键
• 不要在React中改变状态；task.checked = !task.checked;应该重构.

大致如下:

function TaskList({ className, tasks, setTasks }) {
    const [value, setValue] = useState(''); // <-------------------
  
    return (
      <div className={className}>
        <ul className="grow overflow-y-scroll">
          {tasks.map((task, i) => (
            <Task
              key={task.description} // <-------------------
              description={task.description}
              checked={task.checked} // <-------------------
              onChange={() => {
                setTasks( // <-------------------
                  tasks.map(
                    (task, j) => i !== j ? task : { ...task, checked: !task.checked }
                  )
                );
              }}
            />
          ))}
        </ul>
        <input
          className="my-2 border-b-2 border-blue-300"
          placeholder="Enter task description..."
          value={value} // <-------------------
          onChange={(e) => setValue(e.currentTarget.value)} // <-------------------
        ></input>
        <button
          className="rounded-md bg-blue-400 w-full p-4 text-white text-2xl"
          onClick={() => {
            setTasks([
              ...tasks,
              { description: value, checked: false }, // <-------------------
            ]);
          }}
        >
        ...

function Task({ description, onChange, checked }) { // <-------------------
  return (
    <li className="flex flex-row my-2">
      <input className="mx-2" type="checkbox" onChange={onChange} checked={checked} />  // <-------------------
      <span>{description}</span>
    </li>
  );
}