我正在尝试制作一个应用程序，但删除功能不起作用

Question

删除功能给我“未定义”。请帮助，因为我是编程新手。 预先感谢

https://github.com/bryt11/TodoApp/blob/main/App.js Stack 不允许我发布代码，所以我将其发布到 github 上

尝试创建删除按钮，但它给我未定义

Answer 1

您的问题与您如何将任务项传递到

TodoItem

组件有关。您将任务

text

属性作为

TodoItem

属性传递到

todoText

中。由于这是一个字符串，因此您尝试访问不存在的

id

属性，因此您会在控制台中打印

undefined

。

您可以将

todoText

中的

TodoItem

替换为

todo

，传递整个任务对象而不仅仅是文本。然后从内部根据需要使用

text

和

id

属性。

function TodoItem({ todo, todoDelete, todoCompleted }) {
  return (
    <li>
      <input
        type="checkbox"
        value={todo.text}
        onChange={() => todoCompleted(todo.id)}
      />
      <span>{todo.text}</span>
      <button onClick={() => todoDelete(todo.id)}>x</button>
    </li>
  );
}

您显然需要将

TodoList

中的道具更新为：

<TodoItem
  todo={el}
  key={el.id}
  todoDelete={onDeleteTask}
  todoCompleted={onCompleted}
/>