Ich möchte fragen, warum sich mein Status nicht ändert, wenn ich ein Onclick-Ereignis durchführe. Ich habe vor einiger Zeit gesucht, dass ich die onclick-Funktion im Konstruktor binden muss, aber der Status wird immer noch nicht aktualisiert. Hier ist mein Code:
import React from 'react';
import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import BoardAddModal from 'components/board/BoardAddModal.jsx';
import style from 'styles/boarditem.css';
class BoardAdd extends React.Component {
constructor(props){
super(props);
this.state = {
boardAddModalShow: false
}
this.openAddBoardModal = this.openAddBoardModal.bind(this);
}
openAddBoardModal(){
this.setState({ boardAddModalShow: true });
// After setting a new state it still return a false value
console.log(this.state.boardAddModalShow);
}
render() {
return (
<Col lg={3}>
<a href="javascript:;" className={style.boardItemAdd} onClick={this.openAddBoardModal}>
<div className={[style.boardItemContainer,style.boardItemGray].join(' ')}>
Create New Board
</div>
</a>
</Col>
)
}
}
export default BoardAdd
javascript
reactjs
ecmascript-6
Sydney Loteria
quelle
quelle
setState
gibt kein Versprechen zurück. Wenn es funktioniert, funktioniert es nur , weilawait
einleitet ein async „Tick“ in die Funktion, und es geschah , dass der Staat Update während dieser Zecke verarbeitet wurde. Es ist nicht garantiert. Wie in dieser Antwort angegeben , müssen Sie den Abschlussrückruf verwenden (wenn Sie nach der Aktualisierung des Status wirklich etwas tun müssen, was ungewöhnlich ist; normalerweise möchten Sie nur neu rendern, was automatisch geschieht).Antworten:
Dieser Rückruf ist wirklich chaotisch. Verwenden Sie stattdessen einfach async await:
quelle
setState
gibt kein Versprechen zurück.setState
gibt kein Versprechen zurück, daher sollte es NICHT erwartet werden. Das heißt, ich denke, ich kann sehen, warum dies für einige Leute funktioniert, weil das Warten das Innenleben von setState vor dem Rest der Funktion auf den Aufrufstapel legt, so dass es zuerst verarbeitet wird und somit so aussieht, als wäre der Zustand einstellen. Wenn setState neue asynchrone Aufrufe hätte oder implementiert, würde diese Antwort fehlschlagen. Um diese Funktion ordnungsgemäß zu implementieren, können Sie Folgendes verwenden:await new Promise(resolve => this.setState({ boardAddModalShow: true }, () => resolve()))
Ihr Status benötigt einige Zeit zum Mutieren. Da er
console.log(this.state.boardAddModalShow)
ausgeführt wird, bevor der Status mutiert, erhalten Sie den vorherigen Wert als Ausgabe. Sie müssen also die Konsole im Rückruf auf diesetState
Funktion schreibensetState
ist asynchron. Dies bedeutet, dass Sie es nicht in einer Leitung anrufen können und davon ausgehen können, dass sich der Status in der nächsten geändert hat.Laut React docs
Warum sollten sie
setState
asynchron machen ?quelle
Zum Glück
setState()
nimmt ein Rückruf. Und hier erhalten wir den aktualisierten Status.Betrachten Sie dieses Beispiel.
Wenn ein Rückruf ausgelöst wird, ist this.state der aktualisierte Status.
Sie können
mutated/updated
Daten im Rückruf erhalten.quelle
initMap()
, zum BeispielDa setSatate eine asynchrone Funktion ist, müssen Sie den Status als solchen Rückruf trösten.
quelle
setState()
aktualisiert die Komponente nicht immer sofort. Das Update kann stapelweise oder später verschoben werden. Dies macht das Lesen von this.state direkt nach dem AufrufensetState()
einer potenziellen Gefahr. Verwenden Sie stattdessencomponentDidUpdate
oder einensetState
Rückruf (setState(updater, callback)
), der nach dem Anwenden des Updates garantiert ausgelöst wird. Wenn Sie den Status basierend auf dem vorherigen Status festlegen müssen, lesen Sie das unten stehende Updater-Argument.setState()
führt immer zu einem erneuten Rendern, es sei denn, es wirdshouldComponentUpdate()
false zurückgegeben. Wenn veränderbare Objekte verwendet werden und die bedingte Renderlogik nicht implementiert werden kannshouldComponentUpdate()
,setState()
werden unnötige Neurender vermieden , wenn nur aufgerufen wird , wenn der neue Status vom vorherigen Status abweicht.Das erste Argument ist eine Updater-Funktion mit der Signatur:
state
ist eine Referenz auf den Komponentenzustand zum Zeitpunkt der Anwendung der Änderung. Es sollte nicht direkt mutiert werden. Stattdessen sollten Änderungen dargestellt werden, indem ein neues Objekt basierend auf den Eingaben von Status und Requisiten erstellt wird. Angenommen, wir möchten einen Wert im Status um props.step erhöhen:quelle
Wenn Sie verfolgen möchten, ob der Status aktualisiert wird oder nicht, können Sie dies auch auf andere Weise tun
Auf diese Weise können Sie die Methode "_stateUpdated" jedes Mal aufrufen, wenn Sie versuchen, den Status für das Debuggen zu aktualisieren.
quelle
setState()
ist asynchron. Der beste Weg, um zu überprüfen, ob der Status aktualisiert wird, ist dascomponentDidUpdate()
und keinconsole.log(this.state.boardAddModalShow)
Nachthis.setState({ boardAddModalShow: true })
.laut React Docs
quelle
Laut React Docs
Beispiel:
quelle
Für alle, die dies mit Haken versuchen, benötigen Sie
useEffect
.Ausgabe:
quelle
Als ich den Code ausführte und meine Ausgabe an der Konsole überprüfte, zeigte sich, dass er undefiniert ist. Nachdem ich mich umgesehen und etwas gefunden habe, das für mich funktioniert hat.
Ich habe diese Methode in meinem Code nach constructor () hinzugefügt. Überprüfen Sie den Lebenszyklus des reaktiven nativen Workflows.
https://images.app.goo.gl/BVRAi4ea2P4LchqJ8
quelle
quelle
Ja, da setState eine asynchrone Funktion ist. Der beste Weg, um den Status direkt nach dem Schreiben des Set-Status festzulegen, ist die Verwendung von Object.assign wie folgt: Wenn Sie beispielsweise eine Eigenschaft isValid auf true setzen möchten, gehen Sie folgendermaßen vor
Sie können direkt nach dem Schreiben dieser Zeile auf den aktualisierten Status zugreifen.
quelle