Tại sao gọi phương thức setState không làm thay đổi trạng thái ngay lập tức?

Tôi đang đọc phần Biểu mẫu củaphản ứngtài liệu và chỉ cần thử mã này để chứng minh onChangeviệc sử dụng ( 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')
);

Khi tôi cập nhật <input/>giá trị trong trình duyệt, cái thứ hai console.logtrong cuộc handleChangegọi lại sẽ in giống valuenhư lần đầu tiên console.log, Tại sao tôi không thể thấy kết quả this.setState({value: event.target.value})trong phạm vi handleChangegọi lại?

Từ tài liệu của React :

setState()không ngay lập tức đột biến this.statenhưng tạo ra sự chuyển đổi trạng thái đang chờ xử lý. Truy cập this.statesau khi gọi phương thức này có thể có khả năng trả về giá trị hiện có. Không có gì đảm bảo cho hoạt động đồng bộ của các cuộc gọi đến setStatevà các cuộc gọi có thể được thực hiện theo đợt để tăng hiệu suất.

Nếu bạn muốn một chức năng được thực thi sau khi thay đổi trạng thái xảy ra, hãy chuyển nó dưới dạng gọi lại.

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

Như đã đề cập trong tài liệu React, không có gì đảm bảo setStateđược bắn đồng bộ, do đó bạn console.logcó thể trả lại trạng thái trước khi cập nhật.

Michael Parker đề cập đến việc thông qua một cuộc gọi lại trong setState. Một cách khác để xử lý logic sau khi thay đổi trạng thái là thông qua componentDidUpdatephương thức vòng đời, đây là phương pháp được đề xuất trong tài liệu React.

Nói chung, chúng tôi khuyên bạn nên sử dụng thành phầnDidUpdate () cho logic đó.

Điều này đặc biệt hữu ích khi có thể có các lần setStatebắn liên tiếp và bạn muốn thực hiện chức năng tương tự sau mỗi thay đổi trạng thái. Thay vì thêm một cuộc gọi lại cho mỗi setState, bạn có thể đặt chức năng bên trong componentDidUpdate, với logic cụ thể bên trong nếu cần thiết.

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

Bạn có thể thử sử dụng ES7 async / await. Ví dụ sử dụng ví dụ của bạn:

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

Xem ra các phương pháp vòng đời phản ứng

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

Tôi đã làm việc trong vài giờ để tìm ra rằng getDerivedStateFromPropssẽ được gọi sau mỗi setState().

😂

async-await cú pháp hoạt động hoàn hảo cho một cái gì đó như sau ...

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

Đơn giản chỉ cần đặt - this.setState ({data: value}) về bản chất là không đồng bộ có nghĩa là nó di chuyển ra khỏi Ngăn xếp cuộc gọi và chỉ quay lại Ngăn xếp cuộc gọi trừ khi nó được giải quyết.

Vui lòng đọc về Vòng lặp sự kiện để có một bức tranh rõ ràng về bản chất không đồng bộ trong JS và lý do tại sao phải mất thời gian để cập nhật -

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

Vì thế -

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

vì nó cần có thời gian để cập nhật. Để đạt được quy trình trên -

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