In meiner Reaktionskomponente versuche ich, einen einfachen Spinner zu implementieren, während eine Ajax-Anforderung ausgeführt wird. Ich verwende den Status, um den Ladestatus zu speichern.
Aus irgendeinem Grund löst dieser Code in meiner React-Komponente diesen Fehler aus
Kann nur eine gemountete oder montierte Komponente aktualisieren. Dies bedeutet normalerweise, dass Sie setState () für eine nicht gemountete Komponente aufgerufen haben. Dies ist ein No-Op. Bitte überprüfen Sie den Code für die undefinierte Komponente.
Wenn ich den ersten setState-Aufruf los werde, verschwindet der Fehler.
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 ich diesen Fehler erhalte, wenn die Komponente bereits bereitgestellt werden sollte (wie sie von componentDidMount aufgerufen wird). Ich dachte, es wäre sicher, den Status festzulegen, sobald die Komponente bereitgestellt ist.
quelle
this.state = { loading : null };
Antworten:
Ohne zu sehen, ist die Renderfunktion etwas schwierig. Obwohl Sie bereits etwas erkennen können, das Sie tun sollten, müssen Sie es jedes Mal, wenn Sie ein Intervall verwenden, beim Aufheben löschen. So:
Da diese Erfolgs- und Fehlerrückrufe nach dem Aufheben der Bereitstellung möglicherweise immer noch aufgerufen werden, können Sie mithilfe der Intervallvariablen überprüfen, ob sie bereitgestellt ist.
Hoffe das hilft, stelle die Renderfunktion zur Verfügung, wenn dies nicht funktioniert.
Prost
quelle
componentWillUnmount() { clearInterval(this.loadInterval); }
Es wird nicht von aufgerufen
componentDidMount
. SiecomponentDidMount
erzeugen eine Rückruffunktion, die im Stapel des Timer-Handlers ausgeführt wird, nicht im Stapel voncomponentDidMount
. Anscheinend hatthis.loadSearches
die Komponente zum Zeitpunkt der Ausführung von callback ( ) die Bereitstellung aufgehoben.Die akzeptierte Antwort schützt Sie also. Wenn Sie eine andere asynchrone API verwenden, mit der Sie keine asynchronen Funktionen abbrechen können (die bereits an einen Handler gesendet wurden), können Sie Folgendes tun:
Dadurch wird die von Ihnen gemeldete Fehlermeldung in allen Fällen beseitigt, obwohl Sie das Gefühl haben, Dinge unter den Teppich zu kehren, insbesondere wenn Ihre API eine Abbruchfunktion bietet (wie
setInterval
beiclearInterval
).quelle
isMounted
ist ein Antimuster, von dem Facebook rät, es nicht zu verwenden: facebook.github.io/react/blog/2015/12/16/…Für wen eine andere Option benötigt wird, kann die Rückrufmethode des ref-Attributs eine Problemumgehung sein. Der Parameter von handleRef ist die Referenz auf das div DOM-Element.
Ausführliche Informationen zu Refs und DOM finden Sie unter https://facebook.github.io/react/docs/refs-and-the-dom.html
quelle
quelle
Für die Nachwelt
Dieser Fehler war in unserem Fall auf Reflux, Rückrufe, Weiterleitungen und setState zurückzuführen. Wir haben einen setState an einen onDone-Rückruf gesendet, aber wir haben auch eine Umleitung an den onSuccess-Rückruf gesendet. Im Erfolgsfall wird unser onSuccess-Rückruf vor dem onDone ausgeführt . Dies führt zu einer Umleitung vor dem versuchten setState . Daher der Fehler setState für eine nicht gemountete Komponente.
Reflux-Speicheraktion:
Vor dem Fix anrufen:
Rufen Sie nach dem Fix an:
Mehr
In einigen Fällen haben wir, da Reacts isMounted "veraltet / anti-pattern" ist, die Verwendung einer _mounted-Variablen übernommen und diese selbst überwacht.
quelle
Teilen Sie eine Lösung, die durch React Hooks aktiviert wird .
Dieselbe Lösung kann erweitert werden, wenn Sie frühere Anforderungen bei Änderungen der Abruf-ID stornieren möchten. Andernfalls gibt es Rennbedingungen zwischen mehreren Anfragen
this.setState
während des Flugs ( nicht in der richtigen Reihenfolge aufgerufen).Dies funktioniert dank Verschlüssen in Javascript.
Im Allgemeinen entsprach die obige Idee dem vom React Doc empfohlenen makeCancelable-Ansatz , in dem eindeutig angegeben ist
Anerkennung
https://juliangaramendy.dev/use-promise-subscription/
quelle