UseEffect So überspringen Sie das anfängliche Rendern und lösen es erst nach einer Abhängigkeitsänderung aus

Ich hoffe, es geht dir gut. Ich sehe, dass du mit dem useEffect-Teil etwas frustriert warst, aber keine Sorge, lass uns das gemeinsam beheben und das Problem lösen.

Warum es passiert: Mein Typ useEffect ist wirklich unkompliziert: Es läuft nach dem JSX, auch wenn sich ein Wert in seinem Abhängigkeitsarray ändert. aber manchmal löst useEffect aus, obwohl sich die Daten im Abhängigkeitsarray nicht geändert haben. Dies ist auf das anfängliche Rendern zurückzuführen.

Lösung: Mein Ansatz könnte ein anderer sein als deiner. Wenn ich einen Fehler mache, sag es mir bitte und dann funktioniert das, also lass uns eintauchen

Schritt 1: Erstellen Sie 2 Benutzerreferenzen, in meinem Fall „componentA.tsx“
Wir verwenden zwei Refs, um das anfängliche Renderverhalten zu steuern:

const skippedInitialRender = useRef(false);
const wasInitialRender = useRef(false);

Schritt 2: den useEffect erstellen

useEffect(() => {
        if(skippedInitialRender.current) {
            // After the first render, the value changes and this block will run
        }
        const currentTimeout = setTimeout(() => {
            wasInitialRender.current = true;
            skippedInitialRender.current = true;
        }, 200);
        return () => clearTimeout(currentTimeout);
    }, [value])

*Schritt 3: * Führen Sie Ihre Logik innerhalb der if-Anweisung aus und fertig

*Erklärung: * Während des ersten Renderns verzögern wir die Ausführung mit setTimeout. Dadurch wird sichergestellt, dass unsere Logik nicht ausgeführt wird, egal wie oft useEffect beim ersten Rendern ausgelöst wird (2, 4 oder mehr). Die Logik wird nur ausgeführt, wenn sich der Abhängigkeitswert nach dem ersten Rendern erneut ändert.

Das obige ist der detaillierte Inhalt vonUseEffect So überspringen Sie das anfängliche Rendern und lösen es erst nach einer Abhängigkeitsänderung aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!