英文:
How to remove an item in an array by its id
问题
我有一个问题，需要通过id来删除数组中的特定数据。我在谷歌上得到了一个提示，使用 filter() 是最好的方法来删除元素，就像下面的代码一样。
假设我有如下数据：
const [cart, setCart] = useState([{ id: 1, name: 'shirt', qty: 1 }, { id: 1, name: 't-shirt', qty: 1 }])
然后我有一个用于删除数组中项目的函数：
const removeCartItem = (e) => {
e.preventDefault();
let id = e.target.id; // 需要删除数据的id
setCart((cart) =>
cart.filter((item) => item.id !== id)
);
}
这个方法没有起作用，所以我需要你的帮助，因为我对React.js不太熟悉。提前感谢您。
英文:
I have a problem to remove specific data inside an array by id. I get a hint in google using filter()is the best way to remove the element like code bellow.
lets say i have data like bellow
const [cart,setCart] = useState([{id:1,name:shirt,qty:1},{id:1,name:t-shirt,qty:1}])
then i have a function to remove the item inside array
const removeCartItem = (e) => {
e.preventDefault();
let id = e.target.id;//the id needed to remove the data
setCart((cart) =>
cart.filter((item) => item.id !== id)
);
}
this not working so i need your help because i dont familiar with react js
thankyou in advance
答案1
得分: 1
为了解决这个问题，您需要在执行比较之前将从 e.target.id 获取的 id 转换为数字。您可以使用 parseInt 函数来实现这个目的。以下是您代码的更新版本：
const removeCartItem = (e) => {
e.preventDefault();
const id = parseInt(e.target.id, 10); // 将 id 转换为数字
setCart((cart) =>
cart.filter((item) => item.id !== id)
);
};
现在，比较 item.id !== id 将正常工作，并且具有匹配 id 的项目将从购物车数组中移除。
请确保将传递给 removeCartItem 函数的 id 是您要移除的项目的正确 id。
英文:
To fix this issue, you need to convert the id obtained from e.target.id to a number before performing the comparison. You can use the parseInt function for this purpose. Here's an updated version of your code:
const removeCartItem = (e) => {
e.preventDefault();
const id = parseInt(e.target.id, 10); // Convert id to a number
setCart((cart) =>
cart.filter((item) => item.id !== id)
);
};
Now, the comparison item.id !== id will work correctly, and the item with the matching id will be removed from the cart array.
Make sure that the id you're passing to the removeCartItem function is the correct id of the item you want to remove.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论