Mengapa Kemas Kini `setState` Saya Tidak Mencerminkan Serta-merta dalam Komponen Reaksi Saya?

setState dalam React: Menavigasi Kemas Kini Tak Segerak

Latar Belakang:

Dalam React, setState( ) digunakan untuk mengemas kini keadaan komponen. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa setState() tidak selalunya serta-merta. Ia mungkin dilaksanakan secara tidak segerak, yang membawa kepada potensi percanggahan dalam nilai keadaan.

Isu Khusus:

Pengguna yang menghadapi isu melaporkan ketidakkonsistenan dalam kemas kini keadaan menggunakan setState() dalam kaedah komponen. Khususnya, mereka mendapati bahawa pernyataan console.log yang mengakses keadaan selepas setState() tidak selalu mencerminkan nilai kemas kini yang dimaksudkan.

Coretan Kod:

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

Punca:

Isu ini timbul kerana sifat tak segerak setState(). Apabila console.log pertama dilaksanakan, keadaan masih belum dikemas kini. Oleh itu, ia mencatatkan nilai yang salah.

Penyelesaian:

Untuk menyelesaikannya, disyorkan untuk menggunakan fungsi panggil balik yang disediakan oleh setState() untuk mengakses keadaan dikemas kini selepas kemas kini telah selesai.

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

Dalam coretan kod yang disemak ini, console.log kedua bersarang dalam fungsi panggil balik. Ini memastikan bahawa ia dilaksanakan hanya selepas keadaan dikemas kini, memberikan nilai yang betul.

Atas ialah kandungan terperinci Mengapa Kemas Kini `setState` Saya Tidak Mencerminkan Serta-merta dalam Komponen Reaksi Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!