Question

我有这个效果：

React.useEffect(() => {
  if (!maximumTocAttemptsExceeded) {
    if (!isLoading) {
      console.log('Here I need to reach');
    }
  }
}, [isLoading, error]);

我的疑问是：

如果 error 值（每次渲染组件时作为道具出现）发生变化，useEffect 会被执行吗？但是我没有在 useEffect 中使用它的值。而且，maximumTocAttemptsExceeded 也来自 props，我是否需要将其作为钩子的依赖项？

我的 useEffect 被触发的次数比我需要的多。它应该只在定义错误时执行

Answer 1

如果这是你需要运行的效果：

if (!maximumTocAttemptsExceeded) {
  if (!isLoading) {
    console.log('Here I need to reach');
  }
}

您应该将仅 maximumTocAttemptsExceeded 和 isLoading 添加到您的依赖项数组中。

为什么？

因为 React 将始终使您的效果保持最新。因此，如果您正在使用这些变量，React 会假设如果这些变量之一发生变化，它应该重新运行您的效果代码，以便您在组件上获得最新的效果。

如果 error 对您的效果代码有任何影响，您应该使用它并将其添加到依赖项数组中。

示例：

React.useEffect(() => {
  if (error) {
    if (!maximumTocAttemptsExceeded) {
      if (!isLoading) {
        console.log('Here I need to reach');
      }
    }
  }
}, [isLoading, error,maximumTocAttemptsExceeded]);

请注意，React 仅对这些参考值进行浅层比较。因此，如果依赖项数组中的任何变量是在每次渲染时重新创建的对象或数组，则您的效果将在每次渲染时运行。因为虽然这些对象的内容可能与之前的渲染相同，但它们的引用在重新创建时会发生变化。所以，如果你的效果依赖于一个对象的属性，你应该只使用它，并将它作为 obj.prop 添加到依赖数组中，这样 React 就会知道你依赖于单个 prop对象而不是整个对象。

反应 useEffect deps 被调用

1 个答案: