setState 메서드를 호출하면 상태가 즉시 변환되지 않는 이유는 무엇입니까?

setState 메서드를 호출하면 상태가 즉시 변환되지 않는 이유는 무엇입니까?

좋아, 빨리 끝내도록 할게. 쉬운 해결책일 테니까...

비슷한 질문들을 많이 읽었는데, 답은 아주 분명한 것 같아요.애초에 내가 찾아봐야 할 건 아무것도 없었어!하지만... 어떻게 고쳐야 할지, 왜 이런 일이 일어나는지 알 수 없는 오류가 있습니다.

다음과 같습니다.

class NightlifeTypes extends Component {
constructor(props) {
    super(props);

    this.state = {
        barClubLounge: false,
        seeTheTown: true,
        eventsEntertainment: true,
        familyFriendlyOnly: false
    }
    this.handleOnChange = this.handleOnChange.bind(this);
}

handleOnChange = (event) => {   
    if(event.target.className == "barClubLounge") {
        this.setState({barClubLounge: event.target.checked});
        console.log(event.target.checked)
        console.log(this.state.barClubLounge)
    }
}

render() {
    return (
        <input className="barClubLounge" type='checkbox' onChange={this.handleOnChange} checked={this.state.barClubLounge}/>
    )
}

더 많은 코드들이 이것을 둘러싸고 있지만 나의 문제는 여기에 있다.잘 될 것 같죠?

이것도 해봤어요.

handleOnChange = (event) => {   
if(event.target.className == "barClubLounge") {
    this.setState({barClubLounge: !this.state.barClubLounge});
    console.log(event.target.checked)
    console.log(this.state.barClubLounge)
}

그래서 그 두 개가 있는데console.log()둘 다 같아야 합니다.말그대로 내가 말하는 상태는event.target.checked그 위에 줄 서!

하지만 그것은 항상 그것이 해야 할 것과 반대되는 것을 돌려준다.

사용할 때도 마찬가지입니다.!this.state.barClubLoungefalse로 시작하면 체크박스가 켜져 있는지 여부에 관계없이 false로 되어 있습니다!!

말도 안 되는 역설인데 무슨 일인지 모르겠어요. 도와주세요!

그 이유는 setState가 비동기이기 때문에 갱신을 기대할 수 없기 때문입니다.state직후의 가치setState값을 체크하려면 , 를 사용합니다.callback방법.메서드를 콜백으로 전달하고 콜백 후에 실행됩니다.setState임무를 완수하다

setState가 비동기인 이유

그 이유는setState변경하다state재렌더링을 일으킵니다.이 작업은 비용이 많이 드는 작업일 수 있으며synchronous브라우저가 응답하지 않을 수 있습니다.그 때문에,setState콜은asynchronous또한 UI 경험과 성능을 향상시키기 위해 배치되었습니다.

발신인:

setState()는 this.state를 즉시 변환하지 않고 보류 상태의 천이를 만듭니다.이 메서드를 호출한 후 this.state에 액세스하면 기존 값이 반환될 수 있습니다.setState에 대한 콜의 동기 동작은 보증되지 않으며 성능 향상을 위해 콜이 배치될 수 있습니다.

setState에서 콜백 방식을 사용하는 경우:

갱신된 것을 확인하려면state직후의 가치setState는 다음과 같은 콜백 방식을 사용합니다.

setState({ key: value }, () => {
     console.log('updated state value', this.state.key)
})

체크해 주세요.

class NightlifeTypes extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         barClubLounge: false,
         seeTheTown: true,
         eventsEntertainment: true,
         familyFriendlyOnly: false
      }
   }

   handleOnChange = (event) => {  // Arrow function binds `this`
      let value = event.target.checked;

      if(event.target.className == "barClubLounge") {

         this.setState({ barClubLounge: value}, () => {  //here
             console.log(value);
             console.log(this.state.barClubLounge);
             //both will print same value
         });        

      }
   }

   render() {
      return (
          <input className="barClubLounge" type='checkbox' onChange={this.handleOnChange} checked={this.state.barClubLounge}/>
      )
   }
}

ReactDOM.render(<NightlifeTypes/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

setState는 비동기 함수이기 때문입니다.즉, setState를 호출한 후 상태 변수는 즉시 변경되지 않습니다.따라서 상태 변경 후 즉시 다른 액션을 수행할 경우 setState 업데이트 함수 내에서 setstate 콜백 방식을 사용해야 합니다.

handleOnChange = (event) => { 
     let inputState = event.target.checked;
      if(event.target.className == "barClubLounge") {
         this.setState({ barClubLounge: inputState}, () => {  //here
             console.log(this.state.barClubLounge);
             //here you can call other functions which use this state 
             variable //
         });        
      }
   }

이는 퍼포먼스를 고려하여 설계된 것입니다.React의 setState는 컴포넌트를 재렌더할 수 있는 기능이며, 이는 비용이 많이 드는 CPU 프로세스입니다.따라서 설계자는 여러 렌더링 액션을 하나로 모아 최적화하고 싶었기 때문에 setState는 비동기적입니다.

언급URL : https://stackoverflow.com/questions/42593202/why-calling-setstate-method-doesnt-mutate-the-state-immediately