关于react.js: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>
  );
}