Question

我正在尝试在 reactjs 中实现心愿单功能，我们如何检查被点击的产品是否已经在心愿单数组中，这是我的 addToWishlist 函数，我在这里缺少什么逻辑？

const addToWishlist = (id) => {
    const check_wishlist = products.findIndex((item) => item.id === id);
    console.log(check_wishlist);
    if (check_wishlist !== -1) {
      wishlist.push({ ...products.find((item) => item.id === id) });
      setWishlist([...wishlist]);
    } else {
      wishlist.filter((item) => item.id !== id);
      setWishlist([...wishlist]);
    }
    console.log(wishlist);
  };

Answer 1

您的代码中有 2 个错误 1：你不应该直接推送到心愿单 2：wishlist.filter 不会改变wishlist 的值

const addToWishlist = (id) => {
    const check_wishlist = wishlist.find((item) => item.id === id);
    if (!check_wishlist) {
      const product = products.find((item) => item.id === id);
      setWishlist([...wishlist, product]);
    } else {
      setWishlist(wishlist.filter((item) => item.id !== id));
    }
    console.log(wishlist);
  };

Answer 2

Array.filter 总是返回新列表，因此您需要设置新列表而不是心愿单。

const addToWishlist = (id) => {
const check_wishlist = wishlist.findIndex((item) => item.id === id);
console.log(check_wishlist);
if (check_wishlist !== -1) {
  setWishlist([
   ...wishlist
   products.find((item) => item.id === id);
  ]);
} else {
  const newList = wishlist.filter((item) => item.id !== id);
  setWishlist(newList);
}
console.log(wishlist);
};

Reactjs 产品愿望清单切换

2 个答案: