当 const 数组改变时可以使用 useEffect 更新答案

【问题标题】：Can useEffect update when a const array has changed当 const 数组改变时可以使用 useEffect 更新
【发布时间】：2021-08-09 10:45:32
【问题描述】：

我想知道为什么当 const 数组更改时 useEffect 不调用。
useEffect 只能在数组状态更改时运行吗？

 const itemsInCart = [];

  useEffect(() => {
    if (itemsInCart === undefined)  
      setItemsQuantity('');

    } else if (itemsInCart.length > 99)  
      setItemsQuantity('99+');
     else {
      setItemsQuantity(itemsInCart.length)
    }
  }, [itemsInCart]);

【问题讨论】：

使数组进入状态。然后它会触发
@OliverIlmjärv 如果我不想在数组更新时重新渲染，我该怎么办？ itemsInCart 数组作为道具发送到许多组件，并且在删除项目时我不想重新渲染页面。
您也可以编写一个自定义函数，在其中更新 itemsInCart 数组，该数组也将更新 itemsQuantity 值，您不需要使用 useEffect
"如果我不想在数组更新时重新渲染怎么办？"将数组存储到 useRef 钩子中并写入 itemsInCart.current
@OliverIlmjärv itemsInCartprops 仅在此useEffect() 中用于此组件。

标签： reactjs react-hooks render use-effect

【解决方案1】：

useEffect 的工作原理是检查依赖数组中的每个值是否与上一次渲染中的值相同，如果其中一个值不同，则执行回调。在您的示例中，您通过 length 进行检查，因此您无需在依赖项中传递 array 本身，只需 length 属性就可以了，因此您的代码将如下所示：

 const itemsInCart = [];

  useEffect(() => {
    if (itemsInCart.length === 0)  
      setItemsQuantity('');
    else if (itemsInCart.length > 99)  
      setItemsQuantity('99+');
     else
      setItemsQuantity(itemsInCart.length)
  }, [itemsInCart.length]);

注意：

如果您想跟踪数组中的任何更改，您可以将JSON.stringify(itemsInCart) 作为依赖列表传递。阅读更多here

【讨论】：

itemsInCart.length 会出错，因为它可能未定义
在访问length之前做空检查，像这样itemsInCart?.length，Optional chaining将在这方面帮助我们。
它把它当作false - (itemsInCart?.current.length === 0) 传递给下一个 else if 条件
你能分享你的孔组件吗？也许你的代码有问题。
我现在更改了我的代码 itemsInCart 数组定义为 useRef，请检查我的新问题 - stackoverflow.com/questions/68712201/… 谢谢?

【解决方案2】：

如果您想保持数组处于一种状态，以便触发useEffect，但同时您想避免在数组更改时导致重新渲染，而不是使用useState，您应该使用@ 987654324@

const itemsInCart = useRef([]);
// do stuff
itemsInCart.current = newArray; // newArray holds the new value

这样当你改变itemsInCart的值时，useEffect钩子会被触发，但更新操作本身不会导致重新渲染。

【讨论】：

好的，谢谢 - 我在这里用 localStroage 正确设置了 userReff() -stackoverflow.com/questions/68711409/… 吗？
@ExtraSun 您是否根据我对您之前问题的回答创建了一个新问题？
基于@GiovanniEsposito 评论。请参阅我的问题在您的回答之前发布。
@ExtraSun 诚实且无意失礼，您的代码似乎有很多问题表明您对 React 和 javascript 缺乏了解。例如，您将 new Array() 传递给 JSON.parse() 这是错误的，另一个示例是您有一个调用钩子的函数（所以，一个钩子），然后返回一个值而无法更新所述值（尽管 useEffect 你用过的）。没有简单的方法来回答您的问题，因为有几件事情会同时出错。
new Array() 不等于 [] 吗？因为当我在它是 useRef 数组之前它工作正常，因为 - const [itemsQuantity, setItemsQuantity] = useState(JSON.parse(localStorage.getItem(userItems)) || []);