正确/不正确以忽略某些 React useEffect 依赖项警告?

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

来自React DOCS：

有条件地触发效果

效果的默认行为是在每次完成渲染后触发效果。这样，如果效果的某个依赖项发生更改，则始终会重新创建效果。

但是，在某些情况下，这可能有点矫枉过正，例如上一节中的订阅示例。我们不需要在每次更新时都创建新的订阅，只有在源 props 发生变化时。

若要实现此目的，请将第二个参数传递给 useEffect，该参数是效果所依赖的值数组。我们更新的示例现在如下所示：

useEffect(
() => {
const subscription = props.source.subscribe();
return () => {
subscription.unsubscribe();
};
},
[props.source],
);

因此，从上面的练习中，我们看到依赖数组的目的是有条件地触发效果。

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

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

因此，您需要考虑如果/当这些变量将来发生变化时，是否要重新运行效果。

基本建议：

• 将它们添加到依赖项数组
• 如果它们永远不会改变，就不会有区别
• 如果它们发生变化，请向效果添加一些条件，以决定是否应根据新变量值执行某些操作
• 如果它们只在引用中更改，而不在值(如函数、数组、对象等(上更改，则可以使用useCallback或useRef钩子从第一次渲染中保留这些变量的"引用"，而不是在每次渲染时都获得新的引用。