Mengapa Reaksi Saya menggunakanEffect Hook dengan Fungsi Async Melemparkan Amaran Pembersihan, dan Bagaimana Saya Boleh Membetulkannya?

Amaran Cangkuk React untuk Fungsi Async dalam useEffect: Fungsi Pembersihan Diperlukan

Apabila menggunakan fungsi async dalam cangkuk useEffect React, anda mungkin menghadapi amaran yang menyatakan, "fungsi useEffect mesti kembalikan fungsi pembersihan atau tiada apa-apa." Amaran ini disebabkan oleh potensi kebocoran memori jika fungsi yang dikembalikan tidak dibersihkan dengan betul.

Dalam versi React kurang daripada 18 , biasanya disyorkan untuk menggunakan fungsi tanpa nama di dalam useEffect to elakkan keperluan untuk fungsi pembersihan yang berasingan. Walau bagaimanapun, jika anda lebih suka menggunakan fungsi yang dinamakan untuk kejelasan atau kebolehgunaan semula, anda boleh menggunakan dua pendekatan:

1. Pindahkan Fungsi Async di Luar Kesan:

   Tentukan fungsi async anda di luar useEffect dan panggil terus. Pendekatan ini menghapuskan keperluan untuk fungsi pembersihan dalam useEffect.

2. Gunakan Panggilan Balik dengan useCallback dan useEffect:

   Jika anda perlu menggunakan nama berfungsi dalam useEffect dan juga memerhatikan perubahan dalam kebergantungan, anda boleh menggunakan useCallback untuk membungkus fungsi anda dan menghantarnya kepada useEffect sebagai pergantungan. Ini memastikan useEffect akan dijalankan semula jika kebergantungan berubah, mencetuskan pembersihan panggilan fungsi sebelumnya.

Untuk React versi 18 dan kemudian, penggunaan Suspense disyorkan untuk pengambilan data dalam komponen berfungsi. Suspens membolehkan anda mengendalikan operasi tak segerak sambil menyediakan UI sandaran sehingga data tersedia. Pendekatan ini menghapuskan keperluan untuk kedua-dua fungsi pembersihan dan keadaan perlumbaan yang berpotensi.

Berikut ialah contoh mudah menggunakan Suspense:

import React, { useState, Suspense } from 'react';

function App() {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    const res = await fetch('api/data');
    const data = await res.json();
    setData(data);
  };

  return (
    <Suspense fallback={'Loading...'}>
      <div>{data ? JSON.stringify(data) : 'No data yet'}</div>
    </Suspense>
  );
}

Atas ialah kandungan terperinci Mengapa Reaksi Saya menggunakanEffect Hook dengan Fungsi Async Melemparkan Amaran Pembersihan, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!