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

React 문서에서 언급했듯이 setState동기식으로 발사되는 것을 보장하지 않으므로 console.log업데이트하기 전에 상태를 반환 할 수 있습니다.

Michael Parker는에서 콜백을 전달한다고 언급했습니다 setState. 상태 변경 후 로직을 처리하는 다른 방법은 componentDidUpdate라이프 사이클 방법을 사용하는 것입니다. 라이프 사이클 방법은 React 문서에서 권장되는 방법입니다.

일반적으로 그러한 논리에 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

나는 매 시간 getDerivedStateFromProps마다 호출 될 것을 알기 위해 몇 시간 동안 일했습니다 setState().

😂

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})는 본질적으로 비동기 적이므로 호출 스택에서 벗어나서 해결되지 않으면 콜 스택으로 만 돌아옵니다.

JS의 비동기 특성과 업데이트하는 데 시간이 걸리는 이유에 대한 명확한 그림을 보려면 Event Loop에 대해 읽으십시오.

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