Updater Funktion Syntax mit React setState

ich in der Regel Zustand aktualisieren in reagieren in einer Symbolanzeige wechseln reagieren:Updater Funktion Syntax mit React setState

toggle =() => { 
    this.setState({ 
     open: !this.state.open 
    }) // setState 
    } // toggle callback

Jetzt habe ich eine neue Art und Weise tun, die über die oben beschriebene Weise empfohlen:

In diesem Fall verbraucht die Funktion setState einen Updater (der in diesem Fall eine Callback-Funktion ist), der funktioniert. Wie verbraucht die setState-Funktion den Updater? Der zweite Parameter im Updater props wurde nicht einmal verwendet, was nützt er?

Quelle

2017-09-07 Xiaojun Yu

'.setState()' erkennt, ob Sie ein Objekt oder eine Funktion übergeben, und wenn letztere ruft die Funktion und nutzt, was er als neuer Zustand zurückkehrt . –

Wie erhalten PrevState und Props ihren Wert? Ich schätze, sie bekommen es von diesem.setState. Aber wie macht es das? –

Hier ist ein Beispielcode: https://jsfiddle.net/br1sm4zj/ Wenn Sie die genaue Implementierung sehen wollen, schauen Sie sich einfach die Component-Basisklasse an. Die Verwirrung könnte hier aus der Tatsache entstehen, dass Sie einen Rückruf schreiben, weil die Bibliothek normalerweise die Funktionen bereitstellt und * Sie * sie aufruft. Wenn Sie jedoch Rückrufe verwenden, stellen Sie eine Funktion bereit, die dann vom Framework (React) aufgerufen wird. Es kann eine Weile dauern, um den Kopf herumzulegen. –

In Ihrem Fall können Sie den zweiten Parameter an die setState, wegzulassen

toggle =() => { 
    this.setState((prevState) => { 
     return { 
     open: !prevState.open 
     } 
    }) 
    }

jedoch seine nützlich, wenn Sie den Zustand sowohl auf der current props und der prevState Wert basierend aktualisieren möchten.

Auch

(prevState) => { 
     return { 
     open: !prevState.open 
     } 
    }

ist kein Rückruf, sondern eine Aktualisierungsfunktion. docs nach dem Reagieren:

Das erste Argument ist eine Aktualisierer Funktion mit der Signatur:
(prevState, props) => stateChange 
prevState ein Verweis auf den vorherigen Zustand befindet. Es sollte nicht direkt mutiert sein. Stattdessen sollten Änderungen durch Erstellen eines neuen Objekts basierend auf der Eingabe von prevState and prop s dargestellt werden. Für Beispiel: Angenommen, wir einen Wert im Zustand von props.step:
this.setState((prevState, props) => { 
    return {counter: prevState.counter + props.step}; 
}); 
Beide prevState und Requisiten erhalten durch die Aktualisierungsfunktion sind garantiert up-to-date erhöhen wollte. Die Ausgabe des Updaters ist flach fusioniert mit prevState.

auf diese Antwort auf Stackoverflow Siehe auch zu sehen, was ein setState Rückruf für nützlich,

When to use React setState callback

Quelle

2017-09-07 08:41:57

+1, aber ich würde hinzufügen, dass Sie diese Syntax verwenden möchten, wenn Sie den Status basierend auf dem vorherigen Zustand aktualisieren. Zum Beispiel, indem der Zähler um 1 inkrementiert wird. Andernfalls kann man die andere Methode zum Eingeben eines Objekts verwenden. – Chris

Der Updater empfängt prevState und reps (vorheriger Status und aktueller Status). Ich denke, setState ist ein Versprechen, das den Updater nutzt. Recht? –

@XiaojunYu, die React-Dokumentation gibt eine sehr gute Vorstellung davon, wie sich setState verhält, sie reiht im Prinzip die zu ergreifenden Aktionen ein. Ich würde Ihnen empfehlen, diese https://facebook.github.io/react/docs/react-component.html#setstate zu lesen –

Ich möchte weitere Informationen hinzufügen, warum eine Rückruffunktion in setState Verwendung empfohlen werden.

setState asynchron

für Performance Chargen Zustandsänderungen reagieren, so dass Ihre state nach setState möglicherweise nicht sofort ändern. Das bedeutet, dass Sie sich nicht auf das aktuelle state verlassen sollten, wenn Sie setState aufrufen, weil Sie nicht sicher sein können, was dieser Zustand sein wird!

Außerdem könnte Ihre Syntax einfach sein

this.setState(prevState => ({ open: !prevState.open }))

Quelle

2017-09-07 08:49:34

Updater Funktion Syntax mit React setState

Antwort

Verwandte Themen