Bagaimana cara memperbaiki peringatan ketergantungan yang hilang saat menggunakan useEffect React Hook?

Dengan Bereaksi 16.8.6 (itu bagus pada versi sebelumnya 16.8.3), saya mendapatkan kesalahan ini ketika saya mencoba untuk mencegah loop tak terbatas pada permintaan pengambilan

./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

Saya tidak dapat menemukan solusi yang menghentikan infinite loop. Saya ingin tinggal jauh dari menggunakan useReducer(). Saya memang menemukan diskusi ini https://github.com/facebook/react/issues/14920 di mana solusi yang memungkinkan adalah You can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing.saya tidak yakin dengan apa yang saya lakukan jadi saya belum mencoba mengimplementasikannya dulu.

Saya memiliki pengaturan saat ini React hook useEffect berjalan terus menerus selamanya / infinite loop dan satu-satunya komentar adalah tentang useCallback()yang saya tidak kenal.

Bagaimana saya saat ini menggunakan useEffect()(yang saya hanya ingin menjalankan sekali di awal mirip dengan 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
      });
  };

Jika Anda tidak menggunakan metode fetchBusinesses di mana pun selain dari efeknya, Anda bisa memindahkannya ke efek dan menghindari peringatan

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();
}, []);

Namun jika Anda menggunakan fetchBusinesses di luar render, Anda harus mencatat dua hal

1. Apakah ada masalah dengan Anda tidak lulus fetchBusinessessebagai metode ketika digunakan selama mount dengan penutupan terlampir?
2. Apakah metode Anda bergantung pada beberapa variabel yang diterima dari penutupan terlampir? Ini tidak berlaku untuk Anda.
3. Pada setiap render, fetchBusinesses akan dibuat kembali dan karenanya meneruskannya ke useEffect akan menyebabkan masalah. Jadi pertama-tama Anda harus memoize fetchBusinesses jika Anda akan meneruskannya ke array dependensi.

Singkatnya, saya akan mengatakan bahwa jika Anda menggunakan di fetchBusinessesluar useEffectAnda dapat menonaktifkan aturan menggunakan // eslint-disable-next-line react-hooks/exhaustive-depsjika tidak, Anda dapat memindahkan metode di dalam useEffect

Untuk menonaktifkan aturan Anda akan suka

useEffect(() => {
   // other code
   ...

   // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) 

./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

Ini bukan JS / React error tetapi peringatan eslint (eslint-plugin-react-hooks).

Ini memberi tahu Anda bahwa kait tergantung pada fungsinya fetchBusinesses, jadi Anda harus meneruskannya sebagai ketergantungan.

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

Itu bisa mengakibatkan memanggil fungsi setiap render jika fungsi dideklarasikan dalam komponen seperti:

const Component = () => {
  /*...*/

  //new function declaration every render
  const fetchBusinesses = () => {
    fetch('/api/businesses/')
      .then(...)
  }

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

  /*...*/
}

karena setiap fungsi waktu dideklar ulang dengan referensi baru

Cara yang benar dalam melakukan hal ini adalah:

const Component = () => {
  /*...*/

  // keep function reference
  const fetchBusinesses = useCallback(() => {
    fetch('/api/businesses/')
      .then(...)
  }, [/* additional dependencies */]) 

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

  /*...*/
}

atau hanya mendefinisikan fungsi dalam useEffect

Lebih lanjut: https://github.com/facebook/react/issues/14920

Anda dapat mengaturnya langsung sebagai useEffectpanggilan balik:

useEffect(fetchBusinesses, [])

Ini akan memicu hanya sekali, jadi pastikan semua dependensi fungsi diatur dengan benar (sama seperti menggunakan componentDidMount/componentWillMount...)

Edit 02/21/2020

Hanya untuk kelengkapan:

1. Gunakan fungsi sebagai useEffectpanggilan balik (seperti di atas)

useEffect(fetchBusinesses, [])

2. Nyatakan fungsi di dalamnya useEffect()

useEffect(() => {
  function fetchBusinesses() {
    ...
  }
  fetchBusinesses()
}, [])

3. Memoize dengan useCallback()

Dalam hal ini, jika Anda memiliki dependensi dalam fungsi Anda, Anda harus memasukkannya dalam useCallbackarray dependensi dan ini akan memicu useEffectlagi jika params fungsi berubah. Selain itu, ini banyak boilerplate ... Jadi langsung saja operasikan fungsinya useEffectseperti pada 1. useEffect(fetchBusinesses, []).

const fetchBusinesses = useCallback(() => {
  ...
}, [])
useEffect(() => {
  fetchBusinesses()
}, [fetchBusinesses])

4. Nonaktifkan peringatan eslint

useEffect(() => {
  fetchBusinesses()
}, []) // eslint-disable-line react-hooks/exhaustive-deps

Solusi ini juga diberikan oleh react, saran yang Anda gunakan useCallbackyang akan mengembalikan versi memoize dari fungsi Anda:

Fungsi 'fetchBusinesses' membuat dependensi useEffect Hook (pada baris NN) berubah pada setiap render. Untuk memperbaikinya, bungkus definisi 'fetchBusinesses' ke dalam useCallback sendiri () Hook-hooks / exhaust-deps

useCallbackmudah digunakan karena memiliki tanda tangan yang sama karena useEffectperbedaannya adalah useCallback mengembalikan fungsi. Akan terlihat seperti ini:

 const fetchBusinesses = useCallback( () => {
        return fetch("theURL", {method: "GET"}
    )
    .then(() => { /* some stuff */ })
    .catch(() => { /* some error handling */ })
  }, [/* deps */])
  // We have a first effect thant uses fetchBusinesses
  useEffect(() => {
    // do things and then fetchBusinesses
    fetchBusinesses(); 
  }, [fetchBusinesses]);
   // We can have many effect thant uses fetchBusinesses
  useEffect(() => {
    // do other things and then fetchBusinesses
    fetchBusinesses();
  }, [fetchBusinesses]);

Peringatan ini sangat membantu untuk menemukan komponen yang tidak diperbarui secara konsisten: https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of- ketergantungan .

Namun, Jika Anda ingin menghapus peringatan di seluruh proyek Anda, Anda dapat menambahkan ini ke konfigurasi eslint Anda:

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

Artikel ini adalah primer yang bagus untuk mengambil data dengan kait: https://www.robinwieruch.de/react-hooks-fetch-data/

Pada dasarnya, sertakan definisi fungsi pengambilan di dalam useEffect:

useEffect(() => {
  const fetchBusinesses = () => {
    return fetch("theUrl"...
      // ...your fetch implementation
    );
  }

  fetchBusinesses();
}, []);

Anda dapat menghapus larik tipe argumen 2 []tetapi fetchBusinesses()akan juga dipanggil setiap pembaruan. Anda dapat menambahkan IFpernyataan ke dalam fetchBusinesses()implementasi jika Anda mau.

React.useEffect(() => {
  fetchBusinesses();
});

Yang lainnya adalah mengimplementasikan fetchBusinesses()fungsi di luar komponen Anda. Hanya saja, jangan lupa memberikan argumen ketergantungan pada fetchBusinesses(dependency)panggilan Anda , jika ada.

function fetchBusinesses (fetch) {
  return fetch("theURL", { method: "GET" })
    .then(res => normalizeResponseErrors(res))
    .then(res => res.json())
    .then(rcvdBusinesses => {
      // some stuff
    })
    .catch(err => {
      // some error handling
    });
}

function YourComponent (props) {
  const { fetch } = props;

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

  // ...
}

Sebenarnya peringatan itu sangat berguna ketika Anda berkembang dengan kait. tetapi dalam beberapa kasus, itu bisa menusuk Anda. terutama ketika Anda tidak perlu mendengarkan perubahan dependensi.

Jika Anda tidak ingin memasukkan fetchBusinessesdependensi hook, Anda bisa meneruskannya sebagai argumen ke callback hook dan mengatur main fetchBusinessessebagai nilai default untuk itu seperti ini

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

Ini bukan praktik terbaik tetapi bisa bermanfaat dalam beberapa kasus.

Juga seperti yang ditulis Shubnam, Anda dapat menambahkan kode di bawah ini untuk memberi tahu ESLint untuk mengabaikan pemeriksaan untuk kail Anda.

// eslint-disable-next-line react-hooks/exhaustive-deps

Saya hanya ingin menjalankan [ fetchBusinesses] sekali di awal yang mirip dengancomponentDidMount()

Anda dapat menarik fetchBusinessessepenuhnya dari komponen Anda:

const fetchBusinesses = () => { // or pass some additional input from component as args
  return fetch("theURL", { method: "GET" }).then(n => process(n));
};

const Comp = () => {
  React.useEffect(() => {
    fetchBusinesses().then(someVal => {
      // ... do something with someVal
    });
  }, []); // eslint warning solved!
  return <div>{state}</div>;
};

Ini tidak hanya akan memberikan solusi sederhana dan menyelesaikan peringatan deps-lengkap. fetchBusinesssekarang dapat diuji lebih baik dan lebih mudah Comp, karena berada dalam lingkup modul di luar pohon Bereaksi.

Pindah ke fetchBusinessesluar berfungsi dengan baik di sini, karena kami hanya akan dapat membaca alat peraga awal dan menyatakan dari komponen karena ruang lingkup penutupan basi ( []dep in useEffect).

Bagaimana menghilangkan dependensi fungsi

• Pindahkan fungsi di dalam efek
• Pindahkan fungsi di luar komponen - (kami menggunakan ini)
• Fungsi panggilan selama rendering dan biarkan useEffecttergantung pada nilai ini (fungsi komputasi murni)
• Tambahkan fungsi untuk efek deps dan bungkus dengan useCallbacksebagai upaya terakhir

Mengenai solusi lain:

Menarik ke fetchBusinessesdalam useEffect()tidak terlalu membantu, jika Anda mengakses keadaan lain di dalamnya. eslint masih akan mengeluh: Codesandbox .

Saya juga akan menahan diri dari eslint-deps mengabaikan komentar. Hanya untuk mudah melupakan mereka ketika Anda melakukan refactoring dan perbaikan dependensi Anda.

const [mount, setMount] = useState(false)
const fetchBusinesses = () => { 
   //function defination
}
useEffect(() => {
   if(!mount) {
      setMount(true);
      fetchBusinesses();
   }
},[fetchBusinesses]);

Solusi ini cukup sederhana dan Anda tidak perlu mengesampingkan peringatan es-lint. Cukup pertahankan bendera untuk memeriksa apakah komponen sudah terpasang atau tidak.

kamu coba cara ini

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
      });
  };

dan

useEffect(() => {
    fetchBusinesses();
  });

ini bekerja untukmu. Tapi saran saya coba cara ini juga bekerja untuk Anda. Lebih baik dari sebelumnya. Saya menggunakan cara ini:

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();
      }, []);

jika Anda mendapatkan data berdasarkan id tertentu kemudian tambahkan callback useEffect [id]maka Anda tidak dapat menampilkan peringatan React Hook useEffect has a missing dependency: 'any thing'. Either include it or remove the dependency array

cukup nonaktifkan eslint untuk baris berikutnya;

useEffect(() => {
   fetchBusinesses();
// eslint-disable-next-line
}, []);

dengan cara ini Anda menggunakannya seperti komponen melakukan mount (dipanggil sekali)

diperbarui

atau

const fetchBusinesses = useCallback(() => {
 // your logic in here
 }, [someDeps])

useEffect(() => {
   fetchBusinesses();
// no need to skip eslint warning
}, [fetchBusinesses]); 

fetchBusinesses akan dipanggil setiap kali beberapaDEP akan berubah