解决React报错React Hook useEffect has a missing dependency
目录
- 总览
- 禁用规则
- 依赖移入
- 依赖移出
- useMemo
- useCallback
总览
当useEffect
钩子使用了一个我们没有包含在其依赖数组中的变量或函数时,会产生"React Hook useEffect has a missing dependency"警告。为了解决该错误,禁用某一行的eslint
规则,或者将变量移动到useEffect
钩子内。
这里有个示例用来展示警告是如何发生的。
// App.js import React, {useEffect, useState} from 'react'; export default function App() { const [address, setAddress] = useState({country: '', city: ''}); // ️ objects/arrays are different on re-renders const obj = {country: 'Chile', city: 'Santiago'}; useEffect(() => { setAddress(obj); console.log('useEffect called'); // ️ React Hook useEffect has a missing dependency: 'obj'. // Either include it or remove the dependency array. eslintreact-hooks/exhaustive-deps }, []); return ( <div> <h1>Country: {address.country}</h1> <h1>City: {address.city}</h1> </div> ); }
上述代码片段的问题在于,我们在useEffect
钩子内部使用了obj
变量,但我们没有在其依赖数组中包含该变量。
最明显的解决方法是将obj
变量添加到useEffect
钩子的依赖数组中。然而,在本例中,它将导致一个错误,因为在JavaScript中,对象和数组是通过引用进行比较的。
obj
变量是一个对象,在每次重新渲染时都有相同的键值对,但它每次都指向内存中的不同位置,所以它将无法通过相等检查并导致无限的重新渲染循环。
在JavaScript中,数组也是通过引用进行比较。
禁用规则
绕过"React Hook useEffect has a missing dependency"警告的一个方法是禁用某一行的eslint
规则。
import React, {useEffect, useState} from 'react'; export default function App() { const [address, setAddress] = useState({country: '', city: ''}); const obj = {country: 'Chile', city: 'Santiago'}; useEffect(() => { setAddress(obj); console.log('useEffect called'); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( <div> <h1>Country: {address.country}</h1> <h1>City: {address.city}</h1> </div> ); }
依赖数组上方的注释禁用了单行的react-hooks/exhausting-deps
规则。
当useEffect
钩子的第二个参数传递的是空数组时,只有当组件挂载或者卸载时才会调用。
依赖移入
另一种解决办法是,将变量或者函数声明移动到useEffect
钩子内部。
import React, {useEffect, useState} from 'react'; export default function App() { const [address, setAddress] = useState({country: '', city: ''}); useEffect(() => { // ️ move object / array / function declaration // inside of the useEffect hook const obj = {country: 'Chile', city: 'Santiago'}; setAddress(obj); console.log('useEffect called'); }, []); return ( <div> <h1>Country: {address.country}</h1> <h1>City: {address.city}</h1> </div> ); }
我们把对象的变量声明移到了useEffect
钩子里面。这就消除了警告,因为钩子不再依赖对象,对象声明在钩子内部。
依赖移出
另一个可能的解决方案是将函数或变量的声明移出你的组件,这可能很少使用,但最好知道。
import React, {useEffect, useState} from 'react'; // ️ move function/variable declaration outside of component const obj = {country: 'Chile', city: 'Santiago'}; export default function App() { const [address, setAddress] = useState({country: '', city: ''}); useEffect(() => { setAddress(obj); console.log('useEffect called'); }, []); return ( <div> <h1>Country: {address.country}</h1> <h1>City: {address.city}</h1> </div> ); }
这是很有用的,因为每次重新渲染App组件时,变量不会每次都重新创建。该变量在所有渲染中都会指向内存的相同位置,因此useEffect
不需要在其依赖数组中跟踪它。
useMemo
另一个解决方案是使用useMemo
钩子来得到一个记忆值。
import React, {useMemo, useEffect, useState} from 'react'; export default function App() { const [address, setAddress] = useState({country: '', city: ''}); // ️ get memoized value const obj = useMemo(() => { return {country: 'Chile', city: 'Santiago'}; }, []); useEffect(() => { setAddress(obj); console.log('useEffect called'); // ️ safely include in dependencies array }, [obj]); return ( <div> <h1>Country: {address.country}</h1> <h1>City: {address.city}</h1> </div> ); }
我们使用useMemo
钩子得到一个记忆值,该值在渲染期间不会改变。
useMemo
钩子接收一个函数,该函数返回一个要被记忆的值和一个依赖数组作为参数。该钩子只有在其中一个依赖项发生变化时才会重新计算记忆值。
useCallback
请注意,如果你正在使用一个函数,你将使用useCallback
钩子来获得一个在渲染期间不会改变的记忆回调。
import React, {useMemo, useEffect, useState, useCallback} from 'react'; export default function App() { const [address, setAddress] = useState({country: '', city: ''}); // ️ get memoized callback const sum = useCallback((a, b) => { return a + b; }, []); // ️ get memoized value const obj = useMemo(() => { return {country: 'Chile', city: 'Santiago'}; }, []); useEffect(() => { setAddress(obj); console.log('useEffect called'); console.log(sum(100, 100)); // ️ safely include in dependencies array }, [obj, sum]); return ( <div> <h1>Country: {address.country}</h1> <h1>City: {address.city}</h1> </div> ); }
useCallback
钩子接收一个内联回调函数和一个依赖数组,并返回一个记忆化版本的回调,该回调只在其中一个依赖发生变化时才会改变。
如果这些建议对你都不起作用,你总是可以用注释来消灭警告。
import React, {useEffect, useState} from 'react'; export default function App() { const [address, setAddress] = useState({country: '', city: ''}); const obj = {country: 'Chile', city: 'Santiago'}; useEffect(() => { setAddress(obj); console.log('useEffect called'); // ️ disable the rule for a single line // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( <div> <h1>Country: {address.country}</h1> <h1>City: {address.city}</h1> </div> ); }
以上就是解决React报错React Hook useEffect has a missing dependency的详细内容,更多关于React 报错解决的资料请关注我们其它相关文章!