ทำไมการเรียกใช้เมธอดปฏิกิริยา setState จึงไม่ทำให้เกิดการเปลี่ยนแปลงสถานะทันที

ฉันกำลังอ่านส่วนของฟอร์มreactjsเอกสารและลองใช้รหัสนี้เพื่อสาธิตonChangeการใช้งาน ( 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')
);

เมื่อฉันอัปเดต<input/>ค่าในเบราว์เซอร์ที่สองconsole.logภายในการhandleChangeโทรกลับพิมพ์เหมือนvalueครั้งแรกconsole.logทำไมฉันไม่เห็นผลลัพธ์this.setState({value: event.target.value})ในขอบเขตของการhandleChangeโทรกลับ

จากเอกสารของ React :

setState()ไม่เปลี่ยนแปลงทันทีthis.stateแต่สร้างการเปลี่ยนสถานะที่รอดำเนินการ การเข้าถึงthis.stateหลังจากเรียกวิธีนี้สามารถคืนค่าที่มีอยู่ได้ ไม่มีการรับประกันการทำงานแบบซิงโครนัสของการโทรsetStateและการโทรอาจเป็นชุดสำหรับการเพิ่มประสิทธิภาพ

หากคุณต้องการให้ฟังก์ชั่นที่จะดำเนินการหลังจากการเปลี่ยนแปลงสถานะที่เกิดขึ้นผ่านมันเป็นโทรกลับ

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

ดังที่กล่าวไว้ในเอกสารตอบโต้ไม่มีการรับประกันsetStateว่าจะถูกยิงพร้อมกันดังนั้นคุณconsole.logอาจส่งคืนสถานะก่อนที่จะอัปเดต

setStateไมเคิลพาร์คเกอร์กล่าวผ่านการติดต่อกลับภายใน อีกวิธีหนึ่งในการจัดการตรรกะหลังจากการเปลี่ยนสถานะคือผ่านcomponentDidUpdateวิธีวงจรชีวิตซึ่งเป็นวิธีที่แนะนำใน React docs

โดยทั่วไปเราแนะนำให้ใช้ componentDidUpdate () สำหรับตรรกะดังกล่าวแทน

สิ่งนี้มีประโยชน์อย่างยิ่งเมื่ออาจมีการsetStateยิงต่อเนื่องและคุณต้องการยิงฟังก์ชั่นเดียวกันหลังจากเปลี่ยนสถานะทุกครั้ง แทนที่จะเพิ่มการโทรกลับไปยังแต่ละรายการsetStateคุณสามารถวางฟังก์ชันไว้ภายในcomponentDidUpdateด้วยตรรกะเฉพาะภายในหากจำเป็น

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

คุณสามารถลองใช้ ES7 async / await ตัวอย่างเช่นใช้ตัวอย่างของคุณ:

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

ระวังวิธีวงจรชีวิตของการตอบสนอง！

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

ผมทำงานเป็นเวลาหลายชั่วโมงเพื่อจะพบว่าจะถูกเรียกว่าทุกครั้งหลังgetDerivedStateFromPropssetState()

😂

async-await ไวยากรณ์ทำงานได้อย่างสมบูรณ์แบบสำหรับสิ่งต่อไปนี้ ...

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

เพียงแค่วาง - this.setState ({data: value}) เป็นแบบอะซิงโครนัสในลักษณะที่หมายความว่ามันย้ายออกจาก Call Stack และกลับมาที่ Call Stack เท่านั้นเว้นแต่จะได้รับการแก้ไข

โปรดอ่านเกี่ยวกับ Event Loop เพื่อให้ได้ภาพที่ชัดเจนเกี่ยวกับลักษณะแบบอะซิงโครนัสใน JS และทำไมต้องใช้เวลาในการอัปเดต -

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

ดังนั้น -

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

เนื่องจากต้องใช้เวลาในการอัปเดต เพื่อให้บรรลุกระบวนการข้างต้น -

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