过滤列表中的数据（删除按钮）不起作用？

Question

所以我正在做一个列表，您可以在其中添加项目。添加它们时，您有两个选择：

删除整个列表
删除特定项目。

但是由于某种原因，“handeDelete”按钮不起作用。有人可以告诉我我在代码中写错了什么吗？

CodeSandbox 的 link 是：

import { useState } from "react";
import uuid from "react-uuid";

export default function ItemList() {
const [items, setItems] = useState({ item: "" });
const [groceryList, setGroceryList] = useState([]);

function handleChange(value, type) {
setItems((prev) => {
  return { ...prev, [type]: value };
});
}

function handleSubmit(e) {
e.preventDefault();
const newItem = { ...items, id: uuid() };
setGroceryList([...groceryList, newItem]);
setItems({ item: "" });
}

function handleDelete(id) {
setGroceryList(groceryList.filter((items) => items.id !== id));
}

return (
<>
  <form autoComplete="off" onSubmit={handleSubmit}>
    <input
      type="text"
      name="item"
      id="item"
      value={items.item}
      onChange={(e) => handleChange(e.target.value, "item")}
    />
  </form>
  {groceryList.map((list) => {
    return (
      <div key={list.id}>
        <ul>
          <li> {list.item}</li>
        </ul>
        <button onClick={(id) => handleDelete()}>Delete</button>
      </div>
    );
  })}
  <button onClick={() => setGroceryList([])}>Clear</button>
  </>
 );
}

Answer 1

您的删除按钮定义有误：

<button onClick={() => handleDelete(list.id)}>Delete</button>

您从点击事件中收到的参数不是 id。由于您不使用事件参数本身，因此您可以安全地忽略它。第二个错误是，您没有将 id 本身传递给 handleDelete 函数。

出于学习目的，自嘲并将事件打印到控制台，同时开发：

<button onClick={(evt) => {
          console.log(evt)
          handleDelete(list.id)
        }}>
    Delete
</button>

这将向您展示，您命名为 id（我重命名为 evt）的参数实际上是对综合事件的反应：https://reactjs.org/docs/events.html

过滤列表中的数据（删除按钮）不起作用？

Filtering data in a list (delete button) isn't working?

javascript

filter

reactjs