[reactjs] React setState 콜백을 사용하는 경우

예부터이 setState의 작동 asynchronous방법. 즉 setState, this.state변수 호출 후 즉시 변경되지 않습니다. 따라서 상태 변수에 상태를 설정 한 직후 작업을 수행하고 결과를 반환하려면 콜백이 유용합니다.

아래 예를 고려하십시오

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value });
  this.validateTitle();
},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

title유효성 검사가 수행되기 전에 변수가 변경되지 않았으므로 위의 코드가 예상대로 작동하지 않을 수 있습니다. 이제 우리는 render()함수 자체 에서 유효성 검사를 수행 할 수 있다고 생각할 수 있지만 changeTitle 함수 자체에서 코드를보다 체계적이고 이해하기 쉽게 처리 할 수 ​​있다면 더 좋고 깔끔한 방법입니다.

이 경우 콜백이 유용합니다

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value }, function() {
    this.validateTitle();
  });

},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

또 다른 예로는 dispatch상태가 변경되었을 때 원하는 조치와 조치가 있습니다. 다시 render()렌더링 할 때마다 호출되므로 콜백이 아니라 콜백이 필요하므로 콜백이 필요한 많은 시나리오가 가능합니다.

다른 경우는 API Call

특정 상태 변경을 기반으로 API 호출을 수행해야 할 경우가 발생할 수 있습니다. 렌더 메소드에서 수행하는 경우 렌더링이 onState변경 될 때마다 또는 일부 Prop이 Child Component변경으로 전달되어 호출됩니다 .

이 경우 a setState callback를 사용 하여 업데이트 된 상태 값을 API 호출에 전달 하려고합니다.

....
changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
  // Call API with the updated value
}
....

답변

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

changeSearchParams = (params) => {
  this.setState({ params }, this.performSearch)
}

performSearch = () => {
  API.search(this.state.params, (result) => {
    this.setState({ result })
  });
}

this.setState({ counter: this.state.counter + 1 })

this.setState(
   {counter:this.state.counter+1}
 );

 this.setState(
       (prevState,props)=>{
           return {counter:prevState.counter+1};
        }
    );