Reac setState yöntemini çağırmak durumu derhal değiştirmez?

Formlar bölümünü okuyorumreactjsve sadece onChangekullanımı göstermek için bu kodu denedim ( 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')
);

Ben güncelleme yaparken <input/>tarayıcıda değerini, ikinci console.logiç handleChangecallback'inde aynı yazdırır valueilk olarak console.logben sonucunu göremiyorum neden this.setState({value: event.target.value})kapsamındaki handleChangecallback'inde?

React'in belgelerinden :

setState()hemen değişmez this.stateancak bekleyen bir durum geçişi oluşturur. this.stateBu yöntemi çağırdıktan sonra erişmek potansiyel olarak mevcut değeri döndürebilir. Çağrıların eşzamanlı çalışacağının garantisi yoktur setStateve performans kazanımları için çağrılar toplu olarak yapılabilir.

Durum değişikliği gerçekleştikten sonra bir işlevin yürütülmesini istiyorsanız, işlevi geri arama olarak iletin.

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

React belgelerinde belirtildiği gibi, setStateeşzamanlı olarak tetiklenmenin garantisi yoktur , bu nedenle console.loggüncellemeden önce durumu iade edebilirsiniz.

Michael Parker, içinde bir geri arama geçirmekten bahsediyor setState. Durum değişikliğinden sonra mantığı işlemenin başka bir yolu componentDidUpdate, React belgelerinde önerilen yöntem olan yaşam döngüsü yöntemidir.

Genellikle böyle bir mantık için componentDidUpdate () yöntemini kullanmanızı öneririz.

Bu özellikle art arda setStateişten çıkartıldığında yararlıdır ve her durum değişikliğinden sonra aynı işlevi başlatmak istediğinizde. Her birine bir geri arama eklemek setStateyerine, işlevi içine, componentDidUpdategerekirse belirli bir mantıkla yerleştirebilirsiniz.

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

ES7 zaman uyumsuz / beklemesini kullanmayı deneyebilirsiniz. Örneğin, örneğinizi kullanarak:

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

Reaksiyon yaşam döngüsü yöntemlerine dikkat edin！

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

Bunu öğrenmek için birkaç saat boyunca çalıştı getDerivedStateFromPropsher girdikten sonra yapılabilecek setState().

😂

async-await sözdizimi aşağıdaki gibi bir şey için mükemmel çalışır ...

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}`);
}

Basitçe söylemek gerekirse - this.setState ({data: value}) doğası gereği zaman uyumsuzdur, yani Çağrı Yığını'ndan çıkar ve çözümlenmedikçe yalnızca Çağrı Yığını'na geri gelir.

JS'deki Eşzamansız doğa hakkında net bir resim ve güncellenmenin neden zaman aldığını öğrenmek için lütfen Etkinlik Döngüsü'nü okuyun -

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

Dolayısıyla -

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

güncelleme zaman alır gibi. Yukarıdaki süreci gerçekleştirmek için -

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