解决React报错React Hook useEffect has a missing dependency
总览
当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>
);
}原文链接：bobbyhadz.com/blog/react-…
以上就是解决React报错React Hook useEffect has a missing dependency的详细内容，更多关于React 报错解决的资料请关注脚本之家其它相关文章！
相关文章
下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
今天带来大家学习react-diagram 序列化Json解读的相关知识，本文通过多种案例给大家分析序列化知识，通过图文并茂的形式给大家介绍的非常详细，感兴趣的朋友一起看看吧2021-05-05
这篇文章主要介绍了详解React路由传参方法汇总记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要为大家介绍了React Native与iOS OC之间的交互示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要为大家介绍了Remix中mdx table不支持表格问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
React报错map() is not a function详析
这篇文章主要介绍了React报错map() is not a function详析，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
本篇文章主要介绍了在React 组件中使用Echarts的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了React+Ant Design开发环境搭建的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
详解Jotai Immer如何实现undo redo功能示例详解
这篇文章主要为大家介绍了详解Jotai Immer如何实现undo redo功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
在业务中,需要在一个卡片组件中展示多个标签,标签组件高度相同,宽度和出现顺序不同,要求标签只能在有限的空间内展示,所以本文给大家介绍了React实现多标签在有限空间内展示,需要的朋友可以参考下2023-12-12
最新评论