javascript - useEffect 导致组件无限重新渲染

Question

我正在将项目添加到愿望 list 中，一旦添加，我将尝试重新渲染心形图标以在其上显示一个数字，以表明该项目已添加到愿望 list 中。我想要实现的类似于推特的点赞按钮，当有人喜欢这个帖子时，喜欢的数量会立即增加。因此，在我的情况下，当有人喜欢(收藏)该产品时，它会增加心形图标顶部的数字。我正在使用本地存储来获取添加到心愿单的项目，当在效果中添加新项目时，我可以重新渲染心愿单组件，但它使组件无限地重新渲染，这给了我一个警告的 Warning: Maximum update depth exceeded这是我的效果；

const [wishlist, setWishlist] = React.useState([]);

  React.useEffect(() => {
     if (typeof window !== "undefined") {
       const wishlistStorage =
       localStorage.getItem("wishlist") === null
       ? []
       : [...JSON.parse(localStorage.getItem("wishlist"))];

     if (wishlistStorage.length > 0) {
       setWishlist(wishlistStorage);
  }
}


}, [wishlist]);

如果我从依赖数组中删除愿望 list ，我需要刷新页面以查看正确的项目数量。我在这里做错了什么以及解决这个问题的最佳方法是什么。谢谢!

Answer 1

只需从依赖项中删除愿望 list

     React.useEffect(() => {
     if (typeof window !== "undefined") {
       const wishlistStorage =
       localStorage.getItem("wishlist") === null
       ? []
       : [...JSON.parse(localStorage.getItem("wishlist"))];

     if (wishlistStorage.length > 0) {
       setWishlist(wishlistStorage);
  }
}


}, []);