Bagaimana untuk Mengelakkan 'fungsi useEffect mesti mengembalikan fungsi pembersihan atau tidak' Amaran dalam React?

Amaran Cangkuk React untuk Fungsi Async yang sedang digunakanKesan: Fungsi useEffect Mesti Mengembalikan Fungsi Pembersihan atau Tiada Apa-apa

Dalam React, cangkuk useEffect biasanya digunakan untuk melakukan operasi tak segerak, seperti mengambil data atau menyediakan pendengar acara. Walau bagaimanapun, apabila menggunakan fungsi async dalam useEffect, amaran biasa boleh berlaku: "fungsi useEffect mesti mengembalikan fungsi pembersihan atau tiada apa-apa." Amaran ini menunjukkan bahawa fungsi async tidak mengembalikan apa-apa, dan oleh itu tiada pembersihan dilakukan.

Gambaran Keseluruhan Isu

Pertimbangkan contoh berikut:

useEffect(async () => {
  try {
    const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
    const json = await response.json();
    setPosts(json.data.children.map(it => it.data));
  } catch (e) {
    console.error(e);
  }
}, []);

Di sini, cangkuk useEffect digunakan untuk melakukan operasi pengambilan tak segerak. Walau bagaimanapun, fungsi itu tidak mengembalikan apa-apa, melanggar peraturan React utama untuk cangkuk useEffect.

Memahami Amaran

Amaran itu timbul kerana dalam React, adalah amalan yang baik untuk mengembalikan fungsi pembersihan daripada useEffect jika sebarang operasi tak segerak dilakukan. Fungsi pembersihan ini dipanggil apabila cangkuk useEffect dinyahlekap, membenarkan tindakan pembersihan yang sesuai, seperti membatalkan langganan atau mengalih keluar pendengar acara. Dengan tidak mengembalikan fungsi pembersihan, kemungkinan kesan sampingan mungkin berlarutan dan menjejaskan prestasi.

Key Takeaway

Untuk mengelakkan amaran, pastikan fungsi async dalam useEffect mengembalikan fungsi pembersihan. Jika tiada pembersihan diperlukan, kembalikan fungsi kosong secara eksplisit:

useEffect(async () => {
  try {
    const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
    const json = await response.json();
    setPosts(json.data.children.map(it => it.data));
  } catch (e) {
    console.error(e);
  }
  return () => {} // Explicit empty cleanup function
}, []);

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan 'fungsi useEffect mesti mengembalikan fungsi pembersihan atau tidak' Amaran dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!