Saya mempunyai cabaran, saya ingin memuatkan sebahagian daripada tatasusunan ke dalam tatasusunan baharu yang dipanggil "loadedData" dan hanya memaparkan data yang dimuatkan kerana komponen itu sangat berat.

Namun, pada pemuatan pertama, saya menghadapi banyak masalah kerana useEffect seolah-olah mengacaukannya. Pemuatan pertama berlaku dua kali, dan data pertama ditolak ke dalam tatasusunan sekali untuk setiap pemaparan. Jika saya mengalih keluar "reactStrictMode" ia berfungsi seperti yang diharapkan, tetapi saya tidak mahu "menipu" tanpa memahami akibatnya. Seseorang yang lebih memahami masalah daripada saya meletakkannya di sana atas sebab tertentu..

Status isLoading tidak boleh menghalang larian kedua semasa pemuatan awal - ini ialah cadangan yang saya perolehi dalam urutan lain yang berkaitan dengan isu ini.

Adakah sesiapa tahu mengapa useEffect pertama mengabaikan keadaan isLoading dan cara menanganinya?

// Cuba muatkan bahagian yang kelihatan, tetapi jangan muatkan lebih banyak const [loadedData, setLoadedData] = useState([]); const [isLoading, setIsLoading] = useState(false); const addMoreData = async () => jika (loadedData.length >= data.length) kembali; const startIndex = loadedData.length; const preferredLoadLength = 1; const endIndex = startIndex + preferredLoadLength; const newData = data.slice(startIndex, endIndex); setLoadedData((sebelumnya) => [...sebelumnya, ...newData]); }; // Semak sama ada jadual telah ditatal ke bawah selepas memasang dan mengambil data dan serta-merta perlu mengambil lebih banyak data useEffect(() => { const { scrollHeight, scrollTop, clientHeight } = tableContainerRef.current; jika ( scrollHeight == clientHeight && scrollTop == 0 && loadedData.length < data.length ) { const addNewDataFunction = async () => jika (sedangMemuatkan) { kembali; } setIsLoading(true); tunggu addMoreData(); setIsLoading(false); }; addNewDataFunction(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [data.length, loadedData.length, isLoading]);