React useEffect
钩子自 16.8 版推出以来,已成为 React 库中的一项流行功能。它使开发人员能够在功能组件中执行副作用,如获取数据、更新 DOM 和订阅事件。
不过, useEffect
钩子的使用有时会很棘手。开发人员遇到的一个常见错误是 “React Hook useEffect has a missing dependency. Either include it or remove the dependency array” 的错误。
在本文中,我们将讨论导致该错误的原因,并提供如何修复该错误的各种解决方案。
什么原因导致 “React Hook useEffect Has a Missing Dependency” 错误?
当 useEffect
钩子的依赖关系数组不完整或丢失时,就会出现 “React Hook useEffect has a missing dependency”(React 钩子使用效果缺少依赖关系)错误。
依赖关系数组是 useEffect
钩子中的第二个参数,用于指定效果所依赖的变量。这意味着当依赖关系数组中指定的变量值发生变化时,将重新执行效果。
如果效果所依赖的变量未包含在依赖关系数组中,那么当变量值发生变化时,效果可能不会被重新执行。这可能会导致应用程序出现意外行为和错误。
此错误不是 React 错误,而是 ESLint 错误。ESLint 专门为 React 提供了一个插件,其中包含一套规则,旨在帮助开发人员编写更好的 React 代码。其中一个规则是 "react-hooks/exhaustive-deps"
规则,它可以检测 “React Hook useEffect has a missing dependency” 错误。
举例来说,我们来看一个具有计数状态的功能组件。每当计数状态发生变化时,该组件也要向控制台记录一条包含 count
值的消息:
在上例中,您有一个使用 useState
和 useEffect
挂钩的功能组件。每当 count
状态变量的值发生变化时, useEffect
钩子就会记录一条信息。
但请注意,count
变量并没有列在 useEffect
钩子的第二个参数数组(依赖数组)中。这将触发 “React Hook useEffect has a missing dependency” 错误。
React 钩子 useEffect 有一条缺少依赖关系的错误信息
修复 “React Hook useEffect Has a Missing Dependency” 错误的 3 种方法
根据您希望使用的方法,可以用不同的方式来修复这个错误。以下是各种方法。
- 包含所有缺失的依赖关系
- 在处理对象和函数时使用 memoization 钩子
- 禁用 ESLint 规则
1. 将缺失的依赖关系添加到 useEffect 依赖关系数组中
解决这一错误的直接方法是将 useEffect
钩子中使用的所有依赖关系都加入依赖关系数组。那么您可能会问,我如何知道依赖关系呢?
要识别缺失的依赖关系,您需要查看 useEffect
钩子中使用的变量或值。如果这些变量或值会随着时间的推移而发生变化,那么它们就应该包含在依赖关系数组中。
例如,在前面提供的代码片段中, useEffect
钩子内部使用了 count
变量,但它并没有包含在依赖关系数组中。这意味着如果 count
变量发生变化,useEffect
钩子将不会被重新执行,组件可能会出现过时数据或其他问题。
要解决这个错误,我们可以将 count
变量添加到依赖关系数组中,就像下面这样:
通过将 count
变量添加到依赖关系数组,我们可以告诉 React,只要 count 变量发生变化,就会重新执行 useEffect
钩子。
这将确保组件始终拥有最新数据,并避免出现 “React Hook useEffect has a missing dependency” 的错误。
如果您有多个依赖项,请将它们添加到依赖项数组中,并用逗号将它们分开:
2. 处理对象和函数
在使用对象和数组时,仅将它们添加到依赖数组中是不够的,还需要将它们 memoize 或移动到 useEffect
钩子中或组件外部,以避免不必要的重新呈现。
这是因为在 JavaScript 中,对象和数组是通过引用进行比较的,每次都指向内存中的不同位置,因此每次呈现时其值都会改变,从而导致无限的重新呈现循环。
下面是一个导致错误的示例:
import { useState, useEffect } from 'react'; const App = () => { const [user, setUser] = useState({}); // 👇️this will change on every render let newUser = { name: 'Jane', age: 28 }; useEffect(() => { setUser(newUser); }, [newUser]); return (); }; export default App;Hello World
您可以通过将对象移入 useEffect
钩子或将其移出组件来解决这个错误:
import { useState, useEffect } from 'react'; const App = () => { const [user, setUser] = useState({}); useEffect(() => { let newUser = { name: 'Jane', age: 28 }; setUser(newUser); }, []); return (); }; export default App;Hello World
解决这一问题的更好方法是使用备忘录化钩子,如对对象使用 useMemo
,对函数使用 useCallback
。这将有助于在组件和依赖关系数组中保留对象或函数。
注:memoization 钩子是一组钩子,可让您缓存昂贵的计算结果,避免不必要的重新计算。
当您使用 useMemo
钩子对对象进行记忆化处理时,您的代码就会变成这样:
import { useState, useEffect, useMemo } from 'react'; const App = () => { const [user, setUser] = useState({}); const newUser = useMemo(() => { return { name: 'John', age: 30 }; }, []); useEffect(() => { setUser(newUser); }, [newUser]); return (); }; export default App;Hello World
同样,在使用函数时,可以使用 useCallback
钩子。
3. 禁用 ESLint 规则
“React Hook useEffect has a missing dependency” 错误是一个 ESLint 警告错误,这意味着我们可以禁用该规则,这样它就不会抛出该错误。并不建议在所有情况下都采用这种方法,但如果您确定缺少的依赖关系不是一个问题,这种方法可以快速解决问题。
可以在依赖关系数组行前添加以下注释。
// eslint-disable-next-line react-hooks/exhaustive-deps
下面就是一个例子:
useEffect(() => { console.log(`You clicked ${count} times`); // eslint-disable-next-line react-hooks/exhaustive-deps }, []);
需要注意的是,如果不小心禁用 ESLint 规则,将来可能会导致其他问题。请确保在禁用规则前彻底了解其后果,并尽可能考虑其他解决方案。
小结
“React Hook useEffect has a missing dependency” 错误是 React 开发人员在使用 useEffect 挂钩时面临的常见问题。
在修复该错误时,重要的是要考虑针对特定用例的最佳方法。一般来说,最好避免禁用导致该错误的 ESLint 规则,因为这会在将来导致其他问题。相反,可以尝试在依赖关系数组中加入缺失的依赖关系,或使用正确的 memoization 钩子来解决这个问题。
现在轮到你了: 您遇到过这个问题吗?你是如何解决的?您还使用过本文未涉及的其他方法吗?请在评论中告诉我们!
原文地址:https://www.wbolt.com/react-hook-useeffect-has-a-missing-dependency.html