解决React报错React Hook useEffect has a missing dependency

更新时间：2022年12月01日 16:35:49 作者：Borislav Hadzhiev

这篇文章主要为大家介绍了解决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 报错解决的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React Native性能优化红宝书方案详解
React Native 是Facebook在React.js Conf2015推出的开源框架,使用React和应用平台的原生功能来构建Android和iOS应用,这篇文章主要介绍了React Native性能优化红宝书,需要的朋友可以参考下
2024-06-06
在react中使用highlight.js将页面上的代码高亮的方法
本文通过 highlight.js 库实现对文章正文 HTML 中的代码元素自动添加语法高亮，具有一定的参考价值，感兴趣的可以了解一下
2022-01-01
react中ref获取dom或者组件的实现方法
这篇文章主要介绍了react中ref获取dom或者组件的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
React中如何使用scss
这篇文章主要介绍了React中如何使用scss问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
React性能debug场景解决记录
这篇文章主要为大家介绍了React性能debug场景解决记录，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
React实现控制减少useContext导致非必要的渲染详解
这篇文章主要介绍了React如何有效减少使用useContext导致的不必要渲染,使用useContext在改变一个数据时，是通过自己逐级查找对比改变的数据然后渲染，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-11-11
React为什么需要Scheduler调度器原理详解
这篇文章主要为大家介绍了React为什么需要Scheduler调度器原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
基于React实现调用式Modal组件的全流程
本文基于 nextUI 和 tailwindCSS 实现调用式 Modal 组件的封装,文中通过图文结合的方式和代码示例介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下
2024-12-12
React中设置样式style方式
这篇文章主要介绍了React中设置样式style方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
React手稿之 React-Saga的详解
这篇文章主要介绍了React手稿之 React-Saga的详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11