在 React 中呼叫 setState() 後如何立即存取更新的狀態值？

React 的狀態傳播難題

React 的setState() 方法在嘗試在更新後立即檢索更新的狀態值時提出了挑戰。這是由於 setState() 的非同步性質所造成的。

請考慮以下程式碼：

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

這裡的問題是 setState() 呼叫是非同步的。這表示當第二個 console.log 語句執行時，狀態尚未更新。

為了解決這個問題，可以使用回調模式。這涉及將回呼函數傳遞給setState()，該函數將在狀態變更完成後執行：

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

透過採用此方法，控制台日誌語句將僅在狀態更新後執行，確保顯示正確的值。

以上是在 React 中呼叫 setState() 後如何立即存取更新的狀態值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！