Hook-Warnungen für asynchrone Funktion in useEffect reagieren: Die useEffect-Funktion muss eine Bereinigungsfunktion oder nichts zurückgeben

Ich habe das useEffect-Beispiel wie folgt ausprobiert:

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

und ich bekomme diese Warnung in meiner Konsole. Aber die Bereinigung ist optional für asynchrone Anrufe, denke ich. Ich bin mir nicht sicher, warum ich diese Warnung bekomme. Sandbox zum Beispiel verknüpfen. https://codesandbox.io/s/24rj871r0p

Ich schlage vor, die Antwort von Dan Abramov (einem der Hauptbetreuer von React) hier zu lesen :

Ich denke, Sie machen es komplizierter als es sein muss.

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

Längerfristig werden wir von diesem Muster abraten, da es die Rennbedingungen fördert. Zum Beispiel könnte zwischen dem Beginn und dem Ende Ihres Anrufs alles passieren, und Sie hätten neue Requisiten bekommen können. Stattdessen empfehlen wir Suspense für das Abrufen von Daten, das eher so aussieht

const response = MyAPIResource.read();

und keine Effekte. In der Zwischenzeit können Sie das asynchrone Material in eine separate Funktion verschieben und aufrufen.

Mehr über experimentelle Spannung können Sie hier lesen .

Wenn Sie Funktionen außerhalb mit eslint verwenden möchten.

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

Mit useCallback useCallback . Sandkasten .

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

Wenn Sie eine asynchrone Funktion wie verwenden

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

Es gibt ein Versprechen zurück und useEffecterwartet nicht, dass die Rückruffunktion Versprechen zurückgibt , sondern erwartet, dass nichts zurückgegeben wird oder eine Funktion zurückgegeben wird.

Als Problemumgehung für die Warnung können Sie eine selbstaufrufende asynchrone Funktion verwenden.

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

oder um es sauberer zu machen, können Sie eine Funktion definieren und sie dann aufrufen

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

Die zweite Lösung erleichtert das Lesen und hilft Ihnen beim Schreiben von Code zum Abbrechen früherer Anforderungen, wenn eine neue ausgelöst wird, oder zum Speichern der letzten Anforderungsantwort im Status

Arbeitscodesandbox

Bis React einen besseren Weg bietet, können Sie einen Helfer erstellen useEffectAsync.js:

import { useEffect } from 'react';


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

Jetzt können Sie eine asynchrone Funktion übergeben:

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

Ich habe diese Frage durchgelesen und bin der Meinung, dass der beste Weg zur Implementierung von useEffect in den Antworten nicht erwähnt wird. Angenommen, Sie haben einen Netzwerkanruf und möchten etwas tun, sobald Sie die Antwort erhalten haben. Speichern Sie der Einfachheit halber die Netzwerkantwort in einer Statusvariablen. Möglicherweise möchten Sie action / reducer verwenden, um den Speicher mit der Netzwerkantwort zu aktualisieren.

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

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

Versuchen

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

Für andere Leser kann der Fehler darauf zurückzuführen sein, dass die asynchrone Funktion keine Klammern enthält:

Berücksichtigung der asynchronen Funktion initData

  async function initData() {
  }

Dieser Code führt zu Ihrem Fehler:

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

Aber dieser wird nicht:

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

(Beachten Sie die Klammern um initData ()

Hier kann der void-Operator verwendet werden.
Anstatt:

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

oder

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

du könntest schreiben:

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

Es ist etwas sauberer und hübscher.

Asynchrone Effekte können zu Speicherverlusten führen. Daher ist es wichtig, die Bereinigung der Komponente zu bereinigen. Im Falle eines Abrufs könnte dies folgendermaßen aussehen:

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