useEffect 导致组件无限重新渲染

Question

我正在向心愿单添加项目，一旦添加，我会尝试重新渲染心形图标以在其上显示一个数字，以指示该项目已添加到心愿单。我想要实现的类似于 Twitter 的点赞按钮，当有人点赞帖子时，点赞的数量会立即增加。因此，在我的情况下，当有人喜欢（愿望清单）该产品时，它会增加 Heart 图标顶部的数字。我正在使用本地存储来获取添加到愿望清单的项目，当在效果中添加新项目时，我可以重新渲染愿望清单组件，但它会使组件无限重新渲染，这给了我一个警告的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]);

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

Answer 1

在这里，您在 useEffect 的依赖数组中添加了 wishlist ，并且您添加了条件 if (wishlistStorage.length > 0) { setWishlist(wishlistStorage); } ，因为再次设置愿望清单将导致重新渲染并再次触发 useEffect。

Answer 2

只需从依赖项中删除愿望清单

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

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


}, []);

Answer 3

如果我理解正确，并且您只需要在初始渲染时使用它，那么您可以简单地从依赖数组中删除 wishlist。

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);
     }
  }
}, []);

Answer 4

您可以从依赖数组中删除愿望清单变量。

当你调用setWishlist时，它会更新状态，依赖数组会检查它是否已经改变并再次调用useEffect，从而无限循环。

如果依赖项数组为空，它只会在您的组件挂载、从本地存储中获取数据并初始化您的应用程序时运行。从那里开始，您只需要在本地处理状态并使用任何新的愿望清单项目更新本地存储，但 useEffect 似乎仅用于初始化。

更新 #1

这里的核心问题是 OP 使用 LocalStorage 在组件之间传输数据，这不是正确的做事方式。如果您碰巧偶然发现了 OP 的问题并且您正在这样做，请务必研究一下有关在组件之间共享数据的知识。 最常见的方式是 Context API、Redux 以及将数据作为 props 向下传递。

您可以阅读有关上下文here 的更多信息。

Answer 5

你使用wishlist作为useEffect钩子的deps，当wishlist缓存存在时，wishlistStorage是从本地存储JSON字符串解析的对象。然后，你调用setWishlist(wishlistStorage)，导致钩子重新渲染，wishlist 将有一个新的引用。 useEffect 将在其依赖项更改时再次执行。这就是无限重新渲染的原因。

你可以使用lazy initial state

initialState 参数是初始渲染期间使用的状态。在随后的渲染中，它被忽略。如果初始状态是昂贵计算的结果，您可以提供一个函数，该函数仅在初始渲染时执行

如果存在，则使用本地存储中的缓存来初始化您的状态，否则返回默认值。

例如：

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

Answer 6

您在 useEffect 中使用 setWishlist 来观察愿望清单，这就是为什么当愿望清单值更改时它会导致您进入无限循环，因为它会一次又一次地执行 useEffect 中的代码，所以对于我的解决方案，我在 useEffect 中看到 localStorage 我认为它会仅在第一次渲染中检查，因此您可以简单地删除 [wishlist] -> []

  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);
  }
}


}, []);