Ruft setState() in Reagieren render-Methode
Ich versuche reset Reagieren Zustandsvariablen (default-Werte) in einem container mit setState () - Methode. Aber immer folgende Fehler
Warning: setState(...): Cannot update during an existing state transition
(such as within `render` or another component's constructor). Render methods
should be a pure function of props and state; constructor side-effects are an anti-pattern,
but can be moved to `componentWillMount`.
Und schließlich: Maximum call stack size exceeded.
Meine folgenden code:
resetMsg=()=> {
const company = this.state.company;
company.id = 0;
company.messages = [];
this.setState({company: company});
}
Rufe ich resetMsg() wenn eine variable in der Redux-Zustand wahr ist.
Code, wo ich anrufen resetMsg (Der Wert von resetMessages falsch ist zunächst, und ich muss auf reset Reagieren-Zustand, wenn seine true ):
render() {
if(this.props.resetMessages){
this.resetMsg();
}
- nicht setstate render-Methode, da es rerender und es wird eine Endlosschleife
- ca, die Sie posten, wo Sie nennen diese resetMsg() ?
- Irgendeine Idee, wie man Werte zurücksetzen?
- besser rufen Sie setState in componentWillMount oder componentWillReceiveProps, nicht Rendern. erstellen Sie einen infinity-loop durch den Aufruf setState-in machen. da der Zustand ändern, wird die Komponente rendert wieder. möchten Sie vielleicht einen Blick auf das reagieren lifecycle-Methoden: reactjs.org/docs/react-component.html
Du musst angemeldet sein, um einen Kommentar abzugeben.
Vielleicht möchten Sie sich in
componentWillReceiveProps(nextProps)
Funktion. Nach den offiziellen docs:Dies ist, wo Sie wollen, um die setzt. So etwas wie:
Dem snippet oben werden ausgeführt, jedes mal, Requisiten gesendet, um die Komponente. Es wird zunächst geprüft, ob die
resetMessages
prop ist truthy. Wenn es ist, es wird eine temporäre Kopie dercompany
Zustand, ändern Sie dieid
undmessages
Eigenschaft Werte, und aktualisieren Sie danncompany
mit der neuen ein.Möchte ich betonen, die Probleme hättest du mit deinem code:
Aufrufen
setState()
innenrender()
ist ein no-no.Wann immer Sie nennen
setState()
im Allgemeinen dierender()
wird danach laufen. Dabei im innerenrender()
selbst zu führen, die Funktion, die aufgerufen werden, wieder, und wieder, und wieder...Mutiert der Staat und/oder Requisiten direkt.
Diese Zeile
const company = this.state.company;
nicht erstellen Sie eine Kopie der state variable. Es speichert nur die Referenz zu. Also, wenn Sie dies tun, und dann tuncompany.id = ...
Sie sind im wesentlichen zu tunthis.state.company.id = ...
, die anti-Muster Reagieren. Wir immer nur den Status ändern durchsetState()
.Erstellen Sie eine Kopie, Verwendung
Object.assign({}, this.state.yourObject)
für Objekte undthis.state.yourArray.slice()
für arrays.componentWillReceiveProps ist veraltet jetzt (seit Juni'18)
Sollten Sie verwenden Sie eine der alternativen in der reagieren docs statt.
In deinem Fall denke ich, könnte es gerechtfertigt sein, der "nicht so empfehlenswert" - alternative 1-version, die verwendet getDerivedStateFromProps, als Sie gerade recomputing der Staat vars:
Verwenden
componentWillReceiveProps
zu überprüfen, die Requisiten