英文:
Can someone tell me why this filter function doesn't work?
问题
能有人请解释一下为什么这个筛选器不起作用吗？在“朋友卡片”上点击删除按钮应该重新打印出列表，减去了已删除的卡片。然而，虽然警报出现了，但卡片列表并没有改变。问题出在哪里？
编辑：根据评论调整了代码，但仍然没有改变任何东西
编辑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}
/>
))}
</>
);
}
英文:
Can someone please explain me why this filter doesn't work? Clicking the delete button on a "friend card" is supposed to reprint list minus the deleted card. However, while the alert shows up, the list of cards doesn't change. What's the deal?
edit: adjusted code as per comment, but it still doesn't change anything
edit2: wait, no, right the first time. Realized that x.index wouldn't make sense because I have no index property
export default function App() {
const [friendsState, setFriendsState] = useState(friends);
function deleteCard(index) {
alert("Deleting");
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}
/>
))}
</>
);
}
答案1
得分: 2
Looking at your code, I don't really see a reason you can't just compare the object directly instead of checking properties. Try this instead and see if that works:
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}
/>
))}
</>
);
}
It's pretty clear that your issue is that the id property on the objects do not correspond to the objects' index in the array.
英文:
Looking at your code, I don't really see a reason you can't just compare the object directly instead of checking properties. Try this instead and see if that works:
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}
/>
))}
</>
);
}
It's pretty clear that your issue is that the id property on the objects do not correspond to the objects' index in the array.
答案2
得分: 0
我怀疑你的物品没有一个 index 属性
let newFriends = friendsState.filter((x, i) => {
return i != index;
});
英文:
I doubt that your items have an index property
let newFriends = friendsState.filter((x, i) => {
return i != index;
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论