我可以在反应中使用数组作为 useEffect() 的依赖项吗？答案

【问题标题】：can I use array as depenedency in useEffect() in react?我可以在反应中使用数组作为 useEffect() 的依赖项吗？
【发布时间】：2021-08-20 11:59:44
【问题描述】：

在react中使用数组作为useEffect()钩子的依赖。

const [productCategories, setproductCategories] = useState([]);


useEffect(() => {
    // set something..
    if(categories){
      const filtered = categories.filter((c)=>c.available);
      setproductCategories(filtered);
    }
  }, [categories]);

这里 categories 已经是来自服务器的数组。我想，如果此类别更改设置 productCategories 状态。当我尝试这个时，它会进入无限调用。

【问题讨论】：

您不应该使用 productCategories 而不是类别吗？？？？
问题我可以看到，即使类别是 [] 数组， if(categories) 也会有条件地变为真，并且在您内部调用 setproductCategories 将更新导致重新渲染 -> 从而导致无限循环
如果您从服务器获取categories，我看不出使用useEffect 的意义。你可以简单地做到这一点const [productCategories, setproductCategories] = useState(() => categories.filter((c) => c.available) );

标签： reactjs react-hooks next.js

【解决方案1】：

你可以改用：

const [productCategories, setproductCategories] = useState([]);

useEffect(() => {
    // set something..
    if(categories){
      const filtered = categories.filter((c)=>c.available);
     // when productCategories update
     // your component gonne re-render
      setproductCategories(filtered);
    }
  }, [productCategories]);

【讨论】：

但是productCategories也是数组，会无限循环。

【解决方案2】：

而不是 [类别] 使用 [JSON.stringify(categories)] 随着数组引用的变化，它会进入无限循环，最好试试这个。

【讨论】：