☰

useEffect React Hook を使用するときに依存関係の不足に関する警告を修正する方法 質問する

tag-icon • tag-icon reactjs react-hooks eslint create-react-app use-effect
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()。 このディスカッションを見つけました[ESLint] 'exhaustive-deps' リントルールに対するフィードバック #14920考えられる解決策としては、You can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing.自分がやっていることに自信がないので、まだ実装を試みていない、というものがあります。

現在の設定はReact フック useEffect は永久に/無限ループで継続的に実行されます唯一のコメントはuseCallback()私がよく知らないものです。

現在使用している方法useEffect()（ と同様に、最初に 1 回だけ実行したい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
      });
  };

ベストアンサー1

fetchBusinessesメソッドをエフェクト以外で使用していない場合は、エフェクト内に移動するだけで警告を回避できます。

useEffect(() => {
    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
      });
  };
  fetchBusinesses();
}, []);

ただし、エフェクトの外でfetchBusinessesを使用する場合は、2つの点に注意する必要があります。

  1. マウント中にそれを囲むクロージャとともに使用する場合、メソッドとして渡さないと問題がありますか?fetchBusinesses
  2. あなたのメソッドは、それを囲むクロージャから受け取るいくつかの変数に依存していますか? これは当てはまりません。
  3. レンダリングごとに fetchBusinesses が再作成されるため、これを useEffect に渡すと問題が発生します。したがって、依存関係配列に渡す場合は、まず fetchBusinesses をメモ化する必要があります。

まとめると、fetchBusinessesの外部で使用している場合はuseEffect、ルールを無効にすることができ、// eslint-disable-next-line react-hooks/exhaustive-depsそうでない場合は、メソッドをuseEffect内に移動することができます。

ルールを無効にするには次のように記述します。

useEffect(() => {
   // other code
   ...
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

おすすめ記事