reactjs - Argumen dari tipe '() =>() => Promise' tidak dapat ditetapkan ke parameter dari tipe 'EffectCallback'

Kode saya adalah:

    useEffect(() => {
        document.querySelector('body').style['background-color'] = 'rgba(173, 232, 244,0.2)';
        window.$crisp.push(['do', 'chat:hide']);

        return async () => {
            window.$crisp.push(['do', 'chat:show']);
            document.querySelector('body').style['background-color'] = '#ffffff';
            if (router.query.id) {
                const resDoc = await firebase.firestore().doc(`documents/${router.query.id}`).get();
                if (resDoc.exists) {
                    await clearDocPrediction(router.query.id);
                }
            }
        };
    }, []);

Sekarang alasan saya kembali adalah karena saya percaya bahwa itu melakukan pembersihan fungsi saat dibongkar, jadi saya perlu mempertahankannya. Ini adalah semacam kesalahan build yang saya tidak begitu yakin bagaimana cara menyelesaikannya. Bantuan apa pun akan sangat dihargai.

Jawaban #1

Fungsi callback dari Effect seharusnya mengembalikan void, misalnya:

useEffect(() => { // callback; it returns void
  console.log("Hi")
}, [])

Atau

Seharusnya mengembalikan sebuah fungsi "cleanup" dengan tipe () => void, misalnya:

useEffect(() => {
  console.log("Hi")
  return () => { // cleanup function of type : () => void
    console.log("Cleanup")
  }
}, [])

Anda mendapatkan kesalahan karena fungsi pembersihan dalam kode Anda bukan bertipe () => void, tetapi bertipe () => Promise<void>, misalnya:

Argumen dari tipe '() =>() => Promise' tidak dapat ditugaskan ke parameter dari tipe 'EffectCallback'. Tipe '() => Promise' tidak dapat ditugaskan ke tipe 'void | Destructor'.

useEffect(() => {
  console.log("Hi")
  return async () => { // WRONG
    console.log("Cleanup")
  }
}, [])

Oleh karena itu, inilah cara Anda dapat merestrukturisasi fungsi "cleanup" Anda untuk memperbaikinya:

return () => { // Remove async from here
  const clear = async () => { // Create a new async function: clear
    // write your cleanup code here
  };
  clear() // Call the clear() function
};

Jawaban #2

Callback useEffect seharusnya memiliki tipe kembalian void. Jadi Anda tidak bisa mengembalikan Promise:

useEffect(() => {
        document.querySelector('body').style['background-color'] = 'rgba(173, 232, 244,0.2)';
        window.$crisp.push(['do', 'chat:hide']);

        window.$crisp.push(['do', 'chat:show']);
        document.querySelector('body').style['background-color'] = '#ffffff';
        if (router.query.id) {
            firebase.firestore()
                .doc(`documents/${router.query.id}`)
                .get()
                .then((resDoc) => {
                    if (resDoc.exists) {
                        clearDocPrediction(router.query.id);
                    }
                });
        }
}, []);

Artikel terkait