能有人请解释一下为什么这个筛选器不起作用吗？在“朋友卡片”上点击删除按钮应该重新打印出列表，减去了已删除的卡片。然而，虽然警报出现了，但卡片列表并没有改变。问题出在哪里？
编辑：根据评论调整了代码，但仍然没有改变任何东西
编辑2：等等，不对，第一次就对了。意识到 x.index 没有意义，因为我没有索引属性
export default function App() {
  const [friendsState, setFriendsState] = useState(friends);
  function deleteCard(index) {
    alert("删除");
    let newFriends = friendsState.filter((x) => {
      return x.id != index;
    });
    setFriendsState(newFriends);
  }
  
  return (
    <>
      {friendsState.map((x, index) => (
        <Card
          name={x.name}
          home={x.home}
          id={index}
          deleteCard={() => deleteCard(index)}
          key={index}
        />
      ))}
    </>
  );
}

export default function App() {
  const [friendsState, setFriendsState] = useState(friends);
  function deleteCard(cardToDelete) {
    alert("Deleting");
    let newFriends = friendsState.filter((x) => {
      return x !== cardToDelete;
    });
    setFriendsState(newFriends);
  }
  
  return (
    <>
      {friendsState.map((x, index) => (
        <Card
          name={x.name}
          home={x.home}
          id={index}
          deleteCard={() => deleteCard(x)}
          key={index}
        />
      ))}
    </>
  );
}

let newFriends = friendsState.filter((x, i) => {
  return i != index;
});