通过按钮反应删除项目组件也会在该项目之后删除列表中的项目答案

【问题标题】：React delete item component via button deletes items in list after that item too通过按钮反应删除项目组件也会在该项目之后删除列表中的项目
【发布时间】：2023-01-12 03:48:39
【问题描述】：

请帮忙！不确定我下面的代码有什么问题。我试图仅在删除 API 调用返回后删除子组件，但不知何故，要删除的项目之后的所有项目也会从列表中删除。幸运的是，对于正确的项目，删除 API 调用只会被命中一次。

` 导入“./styles.css”；从“反应”导入{useEffect，useState}；

export default function App() {
  return (
    <TopList />
  );
}

function TopList() {

  const [list, setList] = useState([
    {
      "id": "something1",
      "title": "something1"
    },
    {
      "id": "something2",
      "title": "something2"
    },
    {
      "id": "something3",
      "title": "something3"
    }
  ]);

  const onHandleDelete = (itemDelete) => {
    setList(list.filter(item => item !== itemDelete))
  }

  return <div>
      {list.map(item => <ListItem item={item} onDelete={() => onHandleDelete(item)} />)}
    </div>
}

function ListItem({item, onDelete}) {
  const [deleteClicked, setDeleteClicked] = useState(false)

  const onClickDelete = () => {
    !deleteClicked && setDeleteClicked(true);
    // Do delete API call
  }

  useEffect(() => {
    // Also check API call finished
    if(deleteClicked) {
      onDelete();
    }
  }, [deleteClicked, onDelete])
 
  return <div>{item.title} <button onClick={onClickDelete}>Delete</button></div>
}

期望只有单击删除按钮的项目应该从项目列表中删除。

我也尝试过向组件添加一个键（从项目属性生成），但这似乎也没有用。可能是我加错地方了。

【问题讨论】：

标签： reactjs

【解决方案1】：

将key={item.id}添加到map中的<ListItem。比较 id 比 filter 中的整个对象更好

【讨论】：