Hallo Leute, wie geht es euch allen? Hoffe es geht euch allen gut. Heute stehe ich vor Hook-Warnungen für asynchrone Funktion in useEffect reagieren: useEffect-Funktion muss eine Bereinigungsfunktion zurückgeben oder nichts in reagieren. Also hier bin ich Erkläre dir hier alle möglichen Lösungen.

Beginnen wir mit diesem Artikel, um diesen Fehler zu beheben, ohne Ihre Zeit zu verschwenden.

Wie reagieren Sie auf Hook-Warnungen für die asynchrone Funktion in useEffect: useEffect-Funktion muss eine Bereinigungsfunktion zurückgeben, oder es tritt kein Fehler auf?

Ich führe eine einfache asynchrone Funktion für API-Aufrufe aus. In meiner Konsole tritt jedoch der folgende Fehler auf.

useEffect: useEffect function must return a cleanup function or nothing. Promises and userEffect(async()->... but you can call an async function inside an effect.

Hier ist meine einfache Async-Funktion.

useEffect(async () => {
    try {
        const response = await fetch(`myAPICallHere`);
        const json = await response.json();
        setPosts(json.data.children.map(it => it.data));
    } catch (e) {
        console.error(e);
    }
}, []);

So lösen Sie React-Hook-Warnungen für die asynchrone Funktion in useEffect: Die useEffect-Funktion muss eine Bereinigungsfunktion oder keinen Fehler zurückgeben?

  1. So lösen Sie React-Hook-Warnungen für die asynchrone Funktion in useEffect: useEffect-Funktion muss eine Bereinigungsfunktion zurückgeben oder nichts Fehler?

    So lösen Sie React-Hook-Warnungen für die asynchrone Funktion in useEffect: Die useEffect-Funktion muss eine Bereinigungsfunktion oder nichts zurückgeben eine Funktion wird zurückgegeben. Als Problemumgehung für die Warnung können Sie eine selbstaufrufende asynchrone Funktion verwenden. Dieser Code löst Ihr Problem.

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

    So lösen Sie React-Hook-Warnungen für die asynchrone Funktion in useEffect: Die useEffect-Funktion muss eine Bereinigungsfunktion oder nichts zurückgeben eine Funktion wird zurückgegeben. Als Problemumgehung für die Warnung können Sie eine selbstaufrufende asynchrone Funktion verwenden. Dieser Code löst Ihr Problem.

Lösung 1: Verwenden Sie eine selbstaufrufende asynchrone Funktion

Das Problem ist, dass Ihr Code ein Versprechen und zurückgibt useEffect erwartet nicht, dass die Callback-Funktion Promise zurückgibt, sondern dass nichts oder eine Funktion zurückgegeben wird. Als Problemumgehung für die Warnung können Sie eine selbstaufrufende asynchrone Funktion verwenden. Dieser Code löst Ihr Problem.

useEffect(() => {
    (async function() {
        try {
            const response = await fetch(
                `yourApiCall`
            );
            const json = await response.json();
            setPosts(json.data.children.map(it => it.data));
        } catch (e) {
            console.error(e);
        }
    })();
}, []);

Lösung 2: Definiere eine Funktion und rufe sie dann auf

Um es sauberer zu machen, könnten Sie eine Funktion definieren und sie dann aufrufen. Die zweite Lösung erleichtert das Lesen und hilft Ihnen beim Schreiben von Code, um vorherige Anforderungen abzubrechen, wenn eine neue ausgelöst wird, oder die letzte Anforderungsantwort im Status zu speichern

useEffect(() => {
    async function fetchData() {
        try {
            const response = await fetch(
                `yourApiCall`
            );
            const json = await response.json();
            setPosts(json.data.children.map(it => it.data));
        } catch (e) {
            console.error(e);
        }
    };
    fetchData();
}, []);

Lösung 3: Funktion auf diese Weise verwenden

Anstatt von:

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

oder

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

du könntest schreiben:

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

Sommerlich

Es dreht sich alles um dieses Thema. Ich hoffe, alle Lösungen haben Ihnen sehr geholfen. Kommentieren Sie unten Ihre Gedanken und Ihre Fragen. Kommentieren Sie auch unten, welche Lösung für Sie funktioniert hat?

Lesen Sie auch