Mengapa memanggil reaksi metode setState tidak mengubah status segera?

Saya membaca bagian FormulirReaksidokumentasi dan baru saja mencoba kode ini untuk menunjukkan onChangepenggunaan ( JSBIN ).

var React= require('react');

var ControlledForm= React.createClass({
    getInitialState: function() {
        return {
            value: "initial value"
        };
    },

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

    },

    render: function() {
        return (
            <input type="text" value={this.state.value} onChange={this.handleChange}/>
        );
    }
});

React.render(
    <ControlledForm/>,
  document.getElementById('mount')
);

Ketika saya memperbarui <input/>nilai di browser, yang kedua console.logdi dalam handleChangecallback mencetak sama valuedengan yang pertama console.log, Mengapa saya tidak bisa melihat hasil this.setState({value: event.target.value})dalam lingkup handleChangecallback?

Dari dokumentasi Bereaksi :

setState()tidak segera bermutasi this.statetetapi menciptakan transisi status tertunda. Mengakses this.statesetelah memanggil metode ini berpotensi mengembalikan nilai yang ada. Tidak ada jaminan operasi sinkron dari panggilan ke setStatedan panggilan dapat dikumpulkan untuk keuntungan kinerja.

Jika Anda ingin fungsi dijalankan setelah perubahan status terjadi, berikan sebagai panggilan balik.

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

Seperti disebutkan dalam dokumentasi Bereaksi, tidak ada jaminan setStatedipecat secara serempak, sehingga Anda console.logdapat mengembalikan negara sebelum memperbarui.

Michael Parker menyebutkan lewat callback di dalam setState. Cara lain untuk menangani logika setelah perubahan keadaan adalah melalui componentDidUpdatemetode siklus hidup, yang merupakan metode yang direkomendasikan dalam React docs.

Secara umum kami sarankan menggunakan componentDidUpdate () untuk logika seperti itu.

Ini sangat berguna ketika mungkin ada berturut-turut setStatedipecat, dan Anda ingin memecat fungsi yang sama setelah setiap perubahan negara. Daripada menambahkan panggilan balik ke masing-masing setState, Anda dapat menempatkan fungsi di dalam componentDidUpdate, dengan logika spesifik di dalam jika perlu.

// example
componentDidUpdate(prevProps, prevState) {
  if (this.state.value > prevState.value) {
    this.foo();  
  }
}

Anda dapat mencoba menggunakan ES7 async / menunggu. Misalnya menggunakan contoh Anda:

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

Waspadai metode siklus hidup reaksi！

• http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
• https://reactjs.org/docs/react-component.html

Saya bekerja selama beberapa jam untuk mencari tahu yang getDerivedStateFromPropsakan dipanggil setelah setiap setState().

😂

async-await sintaks berfungsi sempurna untuk sesuatu seperti berikut ...

changeStateFunction = () => {
  // Some Worker..

  this.setState((prevState) => ({
  year: funcHandleYear(),
  month: funcHandleMonth()
}));

goNextMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

goPrevMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

Sederhananya - this.setState ({data: value}) bersifat asinkron yang berarti ia keluar dari Call Stack dan hanya kembali ke Call Stack kecuali jika diselesaikan.

Harap baca tentang Perulangan Acara untuk memiliki gambaran yang jelas tentang sifat Asinkron di JS dan mengapa diperlukan waktu untuk memperbarui -

https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4

Karenanya -

    this.setState({data:value});
    console.log(this.state.data); // will give undefined or unupdated value

karena butuh waktu untuk memperbarui. Untuk mencapai proses di atas -

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