web-dev-qa-db-ja.com

useEffect React Hookを使用するときに欠落している依存関係の警告を修正する方法は？

React 16.8.6（以前のバージョン16.8.3では良かった）の場合、フェッチ要求で無限ループを回避しようとすると、このエラーが発生します。

_./src/components/BusinessesList.js
Line 51:  React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array  react-hooks/exhaustive-deps
_

私は無限ループを止める解決策を見つけることができませんでした。 useReducer()の使用を避けたい。私はこの議論を見つけました https://github.com/facebook/react/issues/1492 可能な解決策は_You can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing._ですが、私がやっていることに自信がありませんまだ実装を試みていません。

私はこの現在の設定 ReactフックのuseEffectが継続的に永久に実行される/無限ループ であり、コメントはuseCallback()についてのみです。

useEffect()を現在どのように使用しているか（componentDidMount()と同様に、最初に一度だけ実行したい）

_useEffect(() => {
    fetchBusinesses();
  }, []);
_
_const fetchBusinesses = () => {
    return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  };
_
reactjseslintcreate-react-appreact-hooks
125
russ

これらの警告は、一貫して更新されないコンポーネントを見つけるのに非常に役立ちます。 https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-依存関係のリスト 。

ただし、プロジェクト全体で警告を削除したい場合は、これをeslint構成に追加できます。

  {
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/exhaustive-deps": 0
    }
  }
0
Jordan Daniels

実際、フックを使用して開発する場合、警告は非常に役立ちます。しかし、いくつかのケースでは、それはあなたに針を刺すことができます。特に、依存関係の変更をリッスンする必要がない場合。

フックの依存関係の内部にfetchBusinessesを入れたくない場合は、それを引数としてフックのコールバックに渡し、メインのfetchBusinessesをこのようにデフォルト値として設定できます

useEffect((fetchBusinesses = fetchBusinesses) => {
   fetchBusinesses();
}, []);

これはベストプラクティスではありませんですが、場合によっては役立つことがあります。

また、Shubnamが書いたように、フックのチェックを無視するようESLintに指示するコードを以下に追加できます。

// eslint-disable-next-line react-hooks/exhaustive-deps
0
Behnam Azimi