Mengapa `setState` React Tidak Mengemas kini Keadaan Serta-merta?

Memahami Sifat Asynchronous Kaedah setState React

Dalam React, kaedah setState memainkan peranan penting dalam mengemas kini keadaan komponen. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa setState tidak segera mengubah keadaan komponen. Sebaliknya, ia menjadualkan kemas kini keadaan dan kemas kini sebenar berlaku secara tidak segerak.

Tingkah laku tak segerak setState ini dijelaskan dalam dokumentasi React:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

Oleh itu, apabila setState dipanggil dalam komponen panggil balik (seperti handleChange dalam kod yang disediakan), keadaan yang dikemas kini tidak tersedia serta-merta dalam skop panggilan balik itu. Inilah sebabnya console.log kedua di dalam handleChange callback mencetak nilai asal this.state.value.

Untuk memastikan sesuatu fungsi dilaksanakan selepas perubahan keadaan berlaku, ia harus dihantar sebagai panggilan balik to setState:

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
});

Dengan pendekatan ini, fungsi panggil balik yang disediakan akan dilaksanakan hanya selepas keadaan dikemas kini, memastikan nilai yang betul dilog ke konsol.

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