React setState 콜백을 사용하는 경우

반응 구성 요소 상태가 변경되면 render 메소드가 호출됩니다. 따라서 상태가 변경되면 렌더링 메소드 본문에서 작업을 수행 할 수 있습니다. 그러면 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);
});

내 마음에 오는 유스 케이스는 api호출이며 each상태 변경을 위해 실행되므로 렌더링에 들어가면 안됩니다 . 그리고 API 호출은 모든 렌더링이 아닌 특수 상태 변경에서만 수행되어야합니다 .

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

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

따라서 상태가 변경되면 렌더링 메소드 본문에서 작업을 수행 할 수 있습니다.

-render 나의 방법이 순수해야 하기 때문에 아주 나쁜 방법입니다 . 즉, 조치, 상태 변경, API 호출을 수행하지 말고 뷰를 합성하여 반환해야합니다. 일부 이벤트에서만 작업을 수행해야합니다. 렌더링은 이벤트가 아니라 componentDidMount예를 들어.

setState 호출을 고려하십시오

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

생각

비동기 함수에서 setState를 호출 할 수 있음

따라서 당신은 의지 할 수 없습니다 this. 위의 호출이 비동기 함수 내에서 이루어진 경우 this해당 시점의 구성 요소 상태를 참조하지만 setState 호출 또는 비동기 작업 시작시의 상태 내부 특성을 참조 할 것으로 예상됩니다. 그리고 작업이 비동기 호출이므로 속성이 시간이 지남에 따라 변경되었을 수 있습니다. 따라서 this키워드를 사용하여 상태의 일부 속성을 참조 하는 것은 신뢰할 수 없으므로 인수가 previousState 및 props 인 콜백 함수를 사용합니다. 이는 비동기 작업이 완료되고 setState를 사용하여 상태를 업데이트하는 시간을 의미합니다. prevState는 setState 일 때 현재 상태를 참조합니다 아직 시작하지 않았습니다. nextState가 손상되지 않도록 신뢰성을 보장하십시오.

잘못된 코드 : 데이터가 손상 될 수 있습니다

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

콜백 함수가있는 setState를 가진 올바른 코드 :

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

따라서 속성에 의해 부여 된 값을 기반으로 현재 상태를 다음 상태로 업데이트해야 할 때마다 비동기 방식으로 setState를 사용하는 것이 좋습니다.

코드 펜으로 여기에 설명하려고했습니다. 코드 펜