Bagaimanakah Saya Boleh Mengakses Nilai Keadaan Yang Dikemas Kini Sejurus Selepas Memanggil setState() dalam React?

Teka-teki Penyebaran Keadaan React

Kaedah setState() React menimbulkan cabaran apabila cuba mendapatkan semula nilai keadaan yang dikemas kini serta-merta selepas mengemas kininya. Ini disebabkan oleh sifat tak segerak setState().

Pertimbangkan kod berikut:

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

Isu di sini ialah panggilan setState() adalah tak segerak. Ini bermakna apabila pernyataan console.log kedua dilaksanakan, keadaan masih belum dikemas kini.

Untuk menangani perkara ini, corak panggil balik boleh digunakan. Ini melibatkan penghantaran fungsi panggil balik kepada setState() yang akan dilaksanakan sebaik sahaja perubahan keadaan selesai:

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

Dengan menggunakan pendekatan ini, pernyataan log konsol hanya akan dilaksanakan selepas keadaan dikemas kini, memastikan bahawa nilai yang betul dipaparkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengakses Nilai Keadaan Yang Dikemas Kini Sejurus Selepas Memanggil setState() dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!