React中如何从待办列表删除对象？出现values不可迭代报错如何解决

问题原因 #

你推测的报错原因是正确的：

• 当前项目中values是存储表单临时输入的对象状态，并非待办列表数组，对对象使用[...values]展开为数组的操作自然会抛出values is not iterable错误
• 你的所有待办数据实际存储在atividades数组状态中，删除操作应该针对该状态执行，而不是操作表单状态values

同时你的代码还有几处隐藏问题需要同步修复：

• handleChange函数中冗余的[event.target.descricao]: event.target.descricao逻辑会导致表单赋值异常
• 表单提交后没有重置表单状态，所有新增待办的id会重复
• 删除按钮没有将待办id传入deleteTodo函数
• 待办列表外层容器绑定了错误的key={values.id}，会导致渲染异常

最优修改方案 #

1. 修正handleChange函数 #

function handleChange(event) {
  setValues({
    ...values,
    [event.target.name]: event.target.value,
  });
}

2. 修正handleSubmit函数，提交后重置表单 #

function handleSubmit(event) {
  event.preventDefault();
  setAtividades([
    ...atividades,
    {
      id: values.id,
      nome: values.atividade,
      descricao: values.descricao,
      checkTrabalho: values.trabalho,
      checkPessoal: values.pessoal,
    },
  ]);
  // 重置表单，生成新的待办id
  setValues({
    id: Date.now(),
    descricao: "",
    atividade: "",
    trabalho: true,
    pessoal: false,
  });
}

3. 重写deleteTodo删除逻辑 #

function deleteTodo(id) {
  const updatedAtividades = atividades.filter(atividade => atividade.id !== id);
  setAtividades(updatedAtividades);
}

4. 修正删除按钮传参与冗余key #

• 把两处待办渲染逻辑中的删除按钮修改为传入当前待办id：

<button onClick={() => deleteTodo(atividade.id)}>deletar</button>

• 删除待办列表外层div上的key={values.id}属性

内容的提问来源于stack exchange，提问作者Elesian