Ich lese den Abschnitt Formulare vonreagierenDokumentation und habe gerade diesen Code ausprobiert, um die onChange
Verwendung zu demonstrieren ( JSBIN ).
var React= require('react');
var ControlledForm= React.createClass({
getInitialState: function() {
return {
value: "initial value"
};
},
handleChange: function(event) {
console.log(this.state.value);
this.setState({value: event.target.value});
console.log(this.state.value);
},
render: function() {
return (
<input type="text" value={this.state.value} onChange={this.handleChange}/>
);
}
});
React.render(
<ControlledForm/>,
document.getElementById('mount')
);
Wenn ich die Aktualisierung <input/>
Wert im Browser, die zweite console.log
innerhalb des handleChange
druckt Rückruf der gleiche value
wie der erste console.log
, warum ich nicht das Ergebnis sehen können , this.setState({value: event.target.value})
im Rahmen des handleChange
Rückruf?
javascript
reactjs
react-jsx
Tarrsalah
quelle
quelle
Antworten:
Aus der Dokumentation von React :
Wenn Sie möchten, dass eine Funktion nach der Statusänderung ausgeführt wird, übergeben Sie sie als Rückruf.
quelle
componentDidUpdate
. Es wird aufgerufen, nachdem sich der Status geändert hat.shouldComponentUpdate
anderes Verhalten angegeben ist. Was genau versuchen Sie in dem Rückruf zu tun, an den Sie übergebensetState
, den Sie vor dem erneuten Rendern ausführen möchten?Wie in der React-Dokumentation erwähnt, gibt es keine Garantie für
setState
ein synchrones Auslösen. Daherconsole.log
können Sie den Status vor der Aktualisierung zurückgeben.Michael Parker erwähnt die Rückgabe eines Rückrufs innerhalb der
setState
. Eine andere Möglichkeit, die Logik nach einer Statusänderung zu handhaben, ist diecomponentDidUpdate
Lifecycle-Methode, die in React-Dokumenten empfohlen wird.Dies ist besonders nützlich, wenn möglicherweise mehrere aufeinanderfolgende
setState
s ausgelöst werden und Sie nach jeder Statusänderung dieselbe Funktion auslösen möchten. Anstatt jedem einen Rückruf hinzuzufügensetState
, können Sie die Funktion innerhalb von platzierencomponentDidUpdate
, wobei bei Bedarf eine bestimmte Logik enthalten ist.quelle
Sie können versuchen, ES7 async / await zu verwenden. Zum Beispiel anhand Ihres Beispiels:
quelle
setState
ist asynchron, gibt aber nichts zurück ,await
funktioniert also die meiste Zeit, aber nur zufällig, da es sich um eine Rennbedingung handelt.Achten Sie auf die Reaktionslebenszyklusmethoden!
Ich habe mehrere Stunden gearbeitet, um herauszufinden, dass
getDerivedStateFromProps
das nach jedem aufgerufen wirdsetState()
.😂
quelle
async-await
Die Syntax funktioniert perfekt für Folgendes:quelle
Bitte lesen Sie über Event Loop, um ein klares Bild über die asynchrone Natur in JS zu erhalten und warum die Aktualisierung einige Zeit in Anspruch nimmt.
Daher -
da es Zeit braucht, um zu aktualisieren. Um den oben genannten Prozess zu erreichen -
quelle