Peringatan React Hook untuk fungsi asinkron dalam useEffect: fungsi useEffect harus mengembalikan fungsi pembersihan atau tidak sama sekali

Saya mencoba contoh useEffect seperti di bawah ini:

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

dan saya mendapatkan peringatan ini di konsol saya. Tapi pembersihan adalah opsional untuk panggilan async menurut saya. Saya tidak yakin mengapa saya mendapatkan peringatan ini. Menautkan sandbox misalnya. https://codesandbox.io/s/24rj871r0p

Saya menyarankan untuk melihat jawaban Dan Abramov (salah satu pengelola inti React) di sini :

Saya pikir Anda membuatnya lebih rumit dari yang seharusnya.

function Example() {
  const [data, dataSet] = useState<any>(null)

  useEffect(() => {
    async function fetchMyAPI() {
      let response = await fetch('api/data')
      response = await response.json()
      dataSet(response)
    }

    fetchMyAPI()
  }, [])

  return <div>{JSON.stringify(data)}</div>
}

Jangka panjang kami akan mencegah pola ini karena mendorong kondisi balapan. Seperti - apa pun bisa terjadi antara panggilan Anda dimulai dan diakhiri, dan Anda bisa mendapatkan properti baru. Sebagai gantinya, kami akan merekomendasikan Suspense untuk pengambilan data yang lebih mirip

const response = MyAPIResource.read();

dan tidak ada efek. Namun sementara itu Anda dapat memindahkan hal-hal asinkron ke fungsi terpisah dan memanggilnya.

Anda dapat membaca lebih lanjut tentang ketegangan eksperimental di sini .

Jika Anda ingin menggunakan fungsi luar dengan eslint.

 function OutsideUsageExample() {
  const [data, dataSet] = useState<any>(null)

  const fetchMyAPI = useCallback(async () => {
    let response = await fetch('api/data')
    response = await response.json()
    dataSet(response)
  }, [])

  useEffect(() => {
    fetchMyAPI()
  }, [fetchMyAPI])

  return (
    <div>
      <div>data: {JSON.stringify(data)}</div>
      <div>
        <button onClick={fetchMyAPI}>manual fetch</button>
      </div>
    </div>
  )
}

Dengan useCallback useCallback . Sandbox .

import React, { useState, useEffect, useCallback } from "react";

export default function App() {
  const [counter, setCounter] = useState(1);

  // if counter is changed, than fn will be updated with new counter value
  const fn = useCallback(() => {
    setCounter(counter + 1);
  }, [counter]);

  // if counter is changed, than fn will not be updated and counter will be always 1 inside fn
  /*const fnBad = useCallback(() => {
      setCounter(counter + 1);
    }, []);*/

  // if fn or counter is changed, than useEffect will rerun
  useEffect(() => {
    if (!(counter % 2)) return; // this will stop the loop if counter is not even

    fn();
  }, [fn, counter]);

  // this will be infinite loop because fn is always changing with new counter value
  /*useEffect(() => {
    fn();
  }, [fn]);*/

  return (
    <div>
      <div>Counter is {counter}</div>
      <button onClick={fn}>add +1 count</button>
    </div>
  );
}

Saat Anda menggunakan fungsi async seperti

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

ia mengembalikan sebuah promise dan useEffecttidak mengharapkan fungsi callback mengembalikan Promise, melainkan ia mengharapkan tidak ada yang dikembalikan atau fungsi dikembalikan.

Sebagai solusi untuk peringatan tersebut, Anda dapat menggunakan fungsi asinkron yang memanggil sendiri.

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

atau untuk membuatnya lebih bersih Anda dapat mendefinisikan sebuah fungsi dan kemudian memanggilnya

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

solusi kedua akan membuatnya lebih mudah dibaca dan akan membantu Anda menulis kode untuk membatalkan permintaan sebelumnya jika permintaan baru diaktifkan atau menyimpan respons permintaan terbaru dalam status

Kode kerja dan kotak

Sampai Bereaksi menyediakan cara yang lebih baik, Anda dapat membuat pembantu, useEffectAsync.js:

import { useEffect } from 'react';


export default function useEffectAsync(effect, inputs) {
    useEffect(() => {
        effect();
    }, inputs);
}

Sekarang Anda dapat meneruskan fungsi async:

useEffectAsync(async () => {
    const items = await fetchSomeItems();
    console.log(items);
}, []);

Saya membaca pertanyaan ini, dan merasa cara terbaik untuk mengimplementasikan useEffect tidak disebutkan dalam jawaban. Katakanlah Anda memiliki panggilan jaringan, dan ingin melakukan sesuatu setelah Anda mendapat tanggapan. Demi kesederhanaan, mari simpan respons jaringan dalam variabel status. Seseorang mungkin ingin menggunakan tindakan / peredam untuk memperbarui penyimpanan dengan respons jaringan.

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

/* This would be called on initial page load */
useEffect(()=>{
    fetch(`https://www.reddit.com/r/${subreddit}.json`)
    .then(data => {
        setData(data);
    })
    .catch(err => {
        /* perform error handling if desired */
    });
}, [])

/* This would be called when store/state data is updated */
useEffect(()=>{
    if (data) {
        setPosts(data.children.map(it => {
            /* do what you want */
        }));
    }
}, [data]);

Referensi => https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

void operator dapat digunakan di sini.
Dari pada:

React.useEffect(() => {
    async function fetchData() {
    }
    fetchData();
}, []);

atau

React.useEffect(() => {
    (async function fetchData() {
    })()
}, []);

Anda bisa menulis:

React.useEffect(() => {
    void async function fetchData() {
    }();
}, []);

Ini sedikit lebih bersih dan lebih cantik.

Efek asinkron dapat menyebabkan kebocoran memori, jadi penting untuk melakukan pembersihan pada pelepasan komponen. Dalam kasus pengambilan ini akan terlihat seperti ini:

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

    React.useEffect(() => {
        const abortController = new AbortController();
        void async function fetchData() {
            try {
                const url = 'https://jsonplaceholder.typicode.com/todos/1';
                const response = await fetch(url, { signal: abortController.signal });
                setData(await response.json());
            } catch (error) {
                console.log('error', error);
            }
        }();
        return () => {
            abortController.abort(); // cancel pending fetch request on component unmount
        };
    }, []);

    return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

mencoba

const MyFunctionnalComponent: React.FC = props => {
  useEffect(() => {
    // Using an IIFE
    (async function anyNameFunction() {
      await loadContent();
    })();
  }, []);
  return <div></div>;
};

Bagi pembaca lain, kesalahan bisa berasal dari fakta bahwa tidak ada tanda kurung yang membungkus fungsi asinkron:

Mempertimbangkan fungsi async initData

  async function initData() {
  }

Kode ini akan menyebabkan kesalahan Anda:

  useEffect(() => initData(), []);

Tapi yang ini, tidak akan:

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

(Perhatikan tanda kurung di sekitar initData ()