Question

这是我编写的一些示例代码，效果很好：

useEffect(() => {
  if (!rolesIsLoading && rolesStatus === 200) {
    customer.roles = rolesData.roles;
  }
}, [rolesIsLoading, rolesStatus]);

我在控制台中收到此警告：

React Hook useEffect缺少依赖项：“ customer.roles”和“ rolesData.roles”。要么包含它们，要么删除依赖项数组react-hooks / exhaustive-deps

问题是，代码现在可以正常工作，并且在某些情况下，按照指示添加此类依赖项时，我会遇到无限循环或其他问题。

对于遇到类似情况时如何解决此问题的任何建议，我将不胜感激。

Answer 1

从反应DOCS ：

有条件地触发效果

效果的默认行为是在每个完成的渲染之后触发效果。这样，如果一种依赖关系发生变化，则始终会重新创建一种效果。

但是，在某些情况下（例如上一节中的订阅示例），这可能会显得过高。仅在源道具已更改的情况下，我们不需要在每次更新时都创建新的订阅。

要实现此目的，请将第二个参数传递给useEffect，它是效果所依赖的值的数组。现在，我们更新后的示例如下所示：
useEffect(
 () => {
   const subscription = props.source.subscribe();
   return () => {
     subscription.unsubscribe();
   };
 },
 [props.source],
);

因此，从上面的示例中我们可以看到，dependencies数组用于有条件地触发效果。

之所以收到警告，是因为您在效果函数中使用了一些外部变量（从效果的角度来看），而这些变量并未在依赖项数组中提及。

React担心您可能会在将来的渲染中获得这些变量的新值，并且由于您的效果使用了它们，因此React“默认意图”是使用新的变量值重新运行该效果。因此，您的效果将始终保持最新状态。

因此，您需要考虑是否要在以后这些变量发生更改时重新运行效果。

基本建议：

将它们添加到依赖项数组
如果它们永远不变，就不会有差异
如果它们发生变化，请在效果中添加一些条件，以决定是否应基于新的变量值来做某事
如果它们仅在引用中更改，而在值（例如函数，数组，对象等）中未更改，则可以使用useCallback或useRef挂钩来保留“ reference”这些变量来自第一个渲染，而不会在每个渲染上获得新的引用。

正确/不正确以忽略一些React useEffect依赖关系警告？

1 个答案: