Reagieren - setState() auf unmontierten Bauteil
In meine reagieren Komponente im Versuch, implementieren Sie einen einfachen spinner, während eine ajax-Anfrage ist in Bearbeitung - im Einsatz von state zu speichern, die den lade-status.
Für einige Grund, dieses Stück code unten in meine Reagieren Komponente wirft dieser Fehler
Können nur aktualisieren montiert oder bei der Montage des Bauteils. Dies bedeutet in der Regel
Sie rief setState() auf eine nicht montierte Komponente. Dies ist ein no-op.
Bitte überprüfen Sie den code für die Undefinierte Komponente.
Wenn ich loszuwerden, die ersten setState-Aufruf der Fehler geht Weg.
JS:
constructor(props) {
super(props);
this.loadSearches = this.loadSearches.bind(this);
this.state = {
loading: false
}
}
loadSearches() {
this.setState({
loading: true,
searches: []
});
console.log('Loading Searches..');
$.ajax({
url: this.props.source + '?projectId=' + this.props.projectId,
dataType: 'json',
crossDomain: true,
success: function(data) {
this.setState({
loading: false
});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
this.setState({
loading: false
});
}.bind(this)
});
}
componentDidMount() {
setInterval(this.loadSearches, this.props.pollInterval);
}
render() {
let searches = this.state.searches || [];
return (<div>
<Table striped bordered condensed hover>
<thead>
<tr>
<th>Name</th>
<th>Submit Date</th>
<th>Dataset & Datatype</th>
<th>Results</th>
<th>Last Downloaded</th>
</tr>
</thead>
{
searches.map(function(search) {
let createdDate = moment(search.createdDate, 'X').format("YYYY-MM-DD");
let downloadedDate = moment(search.downloadedDate, 'X').format("YYYY-MM-DD");
let records = 0;
let status = search.status ? search.status.toLowerCase() : ''
return (
<tbody key={search.id}>
<tr>
<td>{search.name}</td>
<td>{createdDate}</td>
<td>{search.dataset}</td>
<td>{records}</td>
<td>{downloadedDate}</td>
</tr>
</tbody>
);
}
</Table >
</div>
);
}
Die Frage ist, warum bin ich immer diese Fehlermeldung, wenn die Komponente sollte schon montiert werden (wie der aufgerufen wird, von componentDidMount) ich dachte, es war sicher Status setzen, sobald die Komponente montiert ist ?
- in meinem Konstruktor ich die Einstellung "diesem.loadSearches = diese.loadSearches.bind(this);" krank ist, hinzufügen, dass die Frage
- haben Sie versucht, die Einstellung der be auf null im Konstruktor? Das funktioniert vielleicht.
this.state = { loading : null };
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ohne zu sehen, die render-Funktion ist ein bisschen hart. Zwar können bereits Ort etwas, was Sie tun sollten, jedes mal, wenn Sie ein Intervall, du hast es klar auf den aushängen. Also:
Da diese success-und error-callbacks vielleicht noch genannt, bekommen nach dem unmounten, können Sie die Intervall-variable zu überprüfen, ob es montiert ist.
Hoffe, dass dies hilft, stellen Sie die render-Funktion wenn Sie das nicht tun den job.
Cheers
componentWillUnmount() { clearInterval(this.loadInterval); }
Ist es nicht aufgerufen
componentDidMount
. IhrecomponentDidMount
erscheint eine callback-Funktion, die ausgeführt wird in dem Stapel des timer-handler, nicht in den StapelcomponentDidMount
. Offenbar durch die Zeit, Ihre callback (this.loadSearches
) wird dann ausgeführt und die Komponente ist deaktiviert.Also die akzeptierte Antwort wird dich beschützen. Wenn Sie mit einigen anderen asynchronen API, die kann man nicht Abbrechen, asynchrone Funktionen (bereits eingereicht, um einige handler) könnten Sie Folgendes tun:
Dies wird loszuwerden, die Fehlermeldung, die Sie melden in allen Fällen, aber es fühlt sich an wie sweeping Zeug unter den Teppich, besonders wenn Ihre API bietet eine cancel-Funktion (als
setInterval
mitclearInterval
).isMounted
ist ein antipattern, dass facebook empfohlen, nicht zu verwenden: facebook.github.io/reagieren/blog/2015/12/16/...Wem muss eine andere Möglichkeit, das ref-Attribut callback-Methode kann ein workaround. Die parameter der handleRef, ist der Verweis auf div DOM-element.
Ausführliche Informationen über refs und DOM: https://facebook.github.io/react/docs/refs-and-the-dom.html
Für die Nachwelt,
Dieser Fehler, in unserem Fall, wurde im Zusammenhang mit Reflux, Rückrufe, Weiterleitungen und setState. Wir schickten eine setState-zu einem onDone Rückruf, aber wir schickten auch eine Umleitung der onSuccess-callback. Im Falle des Erfolgs, unsere onSuccess-callback wird ausgeführt, bevor die onDone. Diese bewirkt eine Umleitung vor, die versucht setState. Damit der Fehler, setState auf einer nicht gemounteten Komponente.
Reflux-store Aktion:
Anruf vor dem Update:
Rufen Sie nach dem Update:
Mehr
In einigen Fällen, da Reagieren die isMounted ist "deprecated/anti-pattern", haben wir verabschiedet, die die Verwendung eines _mounted variable und überwachung, es selbst.
Teilen eine Lösung aktiviert reagieren Haken.
die gleiche Lösung kann erweitert werden, um, Wann immer Sie wollen Abbrechen Vorherige Anfragen auf der fetch-id ändert, andernfalls würde es zu race-conditions zwischen mehreren in-flight-Anforderungen (
this.setState
genannt out of order).dies funktioniert Dank Verschlüsse in javascript.
Im Allgemeinen, die Idee oben war in der Nähe der makeCancelable Ansatz empfohlen vom reagieren doc, welche deutlich
Kredit
https://juliangaramendy.dev/use-promise-subscription/