Wie kann ich unmittelbar nach dem Aufruf von setState() in React auf aktualisierte Statuswerte zugreifen?

Das State-Propagation-Rätsel von React

Die setState()-Methode von React stellt eine Herausforderung dar, wenn versucht wird, aktualisierte Statuswerte unmittelbar nach der Aktualisierung abzurufen. Dies liegt an der asynchronen Natur von setState().

Bedenken Sie den folgenden Code:

let total = newDealersDeckTotal.reduce((a, b) => 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

Das Problem hierbei ist, dass der setState()-Aufruf asynchron ist. Das bedeutet, dass bei Ausführung der zweiten console.log-Anweisung der Status noch nicht aktualisiert wurde.

Um dieses Problem zu beheben, kann das Rückrufmuster verwendet werden. Dazu gehört die Übergabe einer Rückruffunktion an setState(), die ausgeführt wird, sobald die Statusänderung abgeschlossen ist:

this.setState({ dealersOverallTotal: total }, () => {
  console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
});

Durch diesen Ansatz wird die Konsolenprotokollanweisung erst ausgeführt, nachdem der Status aktualisiert wurde, was gewährleistet dass der korrekte Wert angezeigt wird.

Das obige ist der detaillierte Inhalt vonWie kann ich unmittelbar nach dem Aufruf von setState() in React auf aktualisierte Statuswerte zugreifen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!