Also ich habe folgendes:
let total = newDealersDeckTotal.reduce(function(a, b) {
return a + b;
},
0);
console.log(total, 'tittal'); //outputs correct total
setTimeout(() => {
this.setState({dealersOverallTotal: total});
}, 10);
console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total
newDealersDeckTotal ist nur ein Array von Zahlen, [1, 5, 9]
z. B. this.state.dealersOverallTotal
gibt es nicht die richtige Summe, total
aber? Ich habe sogar eine Zeitüberschreitung verzögert, um zu sehen, ob dies das Problem gelöst hat. irgendwelche offensichtlichen oder sollte ich mehr Code posten?
javascript
reactjs
state
setstate
Der Wurm
quelle
quelle
setState
.setState
tatsächlich ausgeführt, nachdem Sie den Status protokolliert haben. Ich denke, was Sie beim Debuggen tun wollten, war, denconsole.log
Teil innerhalb undsetState
außerhalb des Timeouts zu platzieren .Antworten:
setState()
ist normalerweise asynchron, was bedeutet, dass es zum Zeitpunktconsole.log
des Status noch nicht aktualisiert ist. Versuchen Sie, das Protokoll in den Rückruf dersetState()
Methode einzufügen . Es wird ausgeführt, nachdem die Statusänderung abgeschlossen ist:this.setState({ dealersOverallTotal: total }, () => { console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); });
quelle
setState
.this.setState({someVar: newValue},function(){ console.log("force update") });
useState
Hook in einer Funktionskomponente verwenden. Verwenden SieuseEffect
stattdessen für einen Effekt nach dem Rendern.setState ist asynchron. Sie können die Rückrufmethode verwenden, um den aktualisierten Status abzurufen.
changeHandler(event) { this.setState({ yourName: event.target.value }, () => console.log(this.state.yourName)); }
quelle
Verwenden von async / await
async changeHandler(event) { await this.setState({ yourName: event.target.value }); console.log(this.state.yourName); }
quelle
Die
setState()
Operation ist asynchron und daher wird Ihr Vorgangconsole.log()
ausgeführt, bevorsetState()
die Werte mutiert werden und Sie das Ergebnis sehen.Um dies zu lösen, protokollieren Sie den Wert in der Rückruffunktion von
setState()
:setTimeout(() => { this.setState({dealersOverallTotal: total}, function(){ console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); }); }, 10)
quelle
Bei Haken sollten Sie einen
useEffect
Haken verwenden.const [fruit, setFruit] = useState(''); setFruit('Apple'); useEffect(() => { console.log('Fruit', fruit); }, [fruit])
quelle
useEffect
wird bei jedem erneuten Rendern ausgeführt, und wenn die an das Array übergebenen Elemente Zustandsvariablen sind, wird Sand geändert. Wenn sich die Frucht ändert und die Komponente neu gerendert wird, wird useEffect ausgeführt.Der Setstate reagiert asynchron. Um den aktualisierten Status in der Konsole anzuzeigen, verwenden Sie den folgenden Rückruf (die Rückruffunktion wird nach dem Setstate-Update ausgeführt.)
Die folgende Methode wird "nicht empfohlen", aber zum besseren Verständnis können Sie den aktualisierten Status in der nächsten Zeile sehen, wenn Sie den Status direkt mutieren. Ich wiederhole dies ist "nicht zu empfehlen"
quelle
Fügen
componentDidUpdate(){}
Sie einfach eine Methode in Ihren Code ein, und es wird funktionieren. Hier können Sie den Lebenszyklus von React Native überprüfen:https://images.app.goo.gl/BVRAi4ea2P4LchqJ8
quelle
Ich hatte ein Problem beim mehrmaligen Einstellen des Reaktionsstatus (es wurde immer der Standardstatus verwendet). Nach diesem React / Github- Problem hat es bei mir funktioniert
const [state, setState] = useState({ foo: "abc", bar: 123 }); // Do this! setState(prevState => { return { ...prevState, foo: "def" }; }); setState(prevState => { return { ...prevState, bar: 456 }; });
quelle
Ich hatte die gleiche Situation mit einem verschlungenen Code, und nichts von den vorhandenen Vorschlägen hat für mich funktioniert.
Mein Problem war, dass
setState
dies von einer von einer der Komponenten ausgegebenen Rückruffunktion geschah. Und mein Verdacht ist, dass der Anruf synchron erfolgte, was dies verhindertesetState
Setzen des Status überhaupt verhinderte.Einfach gesagt, ich habe so etwas:
render() { <Control ref={_ => this.control = _} onChange={this.handleChange} onUpdated={this.handleUpdate} /> } handleChange() { this.control.doUpdate(); } handleUpdate() { this.setState({...}); }
Die Art , wie ich zu „reparieren“ hatte es setzt
doUpdate()
insetTimeout
etwa so aus :handleChange() { setTimeout(() => { this.control.doUpdate(); }, 10); }
Nicht ideal, aber sonst wäre es ein bedeutendes Refactoring.
quelle