Mengapa Keadaan Reaksi Saya Tidak Mengemas kini Serta-merta Selepas Panggilan `setTimeout`?

Nyatakan Tidak Mengemas kini dalam React: Menerokai Misteri setTimeout

Kaedah setState() React sering menjadi subjek kekeliruan apabila mengemas kini nyatakan dengan segera. Dalam kes khusus ini, pembangun menghadapi senario di mana keadaan tidak mengemas kini seperti yang dijangkakan.

Pembangun mempunyai tatasusunan nombor, newDealersDeckTotal, yang mereka kumpulkan menjadi jumlah menggunakan reduce(). Mereka kemudian menetapkan keadaan dealersOverallTotal kepada jumlah ini dalam fungsi setTimeout. Walau bagaimanapun, log nilai keadaan sebelum dan selepas setTimeout menghasilkan keputusan yang salah.

Kunci untuk memahami tingkah laku ini terletak pada sifat tak segerak setState(). Walaupun nampaknya keadaan harus ditetapkan dengan segera, kaedah ini tidak segerak, bermakna ia menjadualkan kemas kini keadaan yang mungkin tidak dapat dilihat dengan segera. Inilah sebabnya mengapa konsol mengelog keadaan sebelum dan selepas fungsi setTimeout menghasilkan hasil yang berbeza.

Untuk menyelesaikan isu ini, pembangun boleh menggunakan fungsi panggil balik setState(), yang dilaksanakan selepas kemas kini keadaan selesai. Dengan meletakkan pernyataan log konsol dalam panggilan balik ini, pembangun memastikan bahawa keadaan dikemas kini sebelum log dilaksanakan. Berikut ialah kod yang diperbetulkan:

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

Dengan penyelesaian ini, keadaan akan ditunjukkan dengan tepat apabila log konsol dilaksanakan, memberikan hasil yang diharapkan. Pemahaman tentang tingkah laku tak segerak dalam kaedah setState() React boleh membantu pembangun mengelakkan perangkap kemas kini keadaan yang serupa.

Atas ialah kandungan terperinci Mengapa Keadaan Reaksi Saya Tidak Mengemas kini Serta-merta Selepas Panggilan `setTimeout`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!