React setState 콜백을 사용하는 경우

React setState 콜백을 사용하는 경우

반응 구성 요소 상태가 변경되면 렌더 메서드가 호출됩니다.따라서 모든 상태 변경에 대해 렌더링 메서드 본문에서 작업을 수행할 수 있습니다.그러면 setState 콜백에 특별한 사용 사례가 있나요?

네, 있습니다.setState works works in in in in에서 일하다asynchronous은 즉, 콜을 한 setStatethis.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: 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 콜을 하면 모든 됩니다. 렌더 메서드에서 API 호출을 수행하면 모든 렌더에서 호출됩니다.onState 또는 가 에 입니다.Child Component경되었었다다

는 '아까보다'를 게 것 같아요.setState callback 콜 합니다.

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

1. 유스케이스입니다.api콜은 다음 시간 동안 실행되기 때문에 렌더링에 들어가지 않습니다.each상태 변화또한 API 호출은 특별한 상태 변경 시에만 수행되어야 하며 모든 렌더에서 수행해서는 안 됩니다.

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

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

따라서 모든 상태 변경에 대해 렌더링 메서드 본문에서 작업을 수행할 수 있습니다.

매우 나쁜 관행입니다. 왜냐하면render 변경,.-filename은 수 있습니다.액션, 상태 변경, API 호출이 수행되지 않아야 합니다.뷰를 합성하여 반환하기만 하면 됩니다.일부 이벤트에 대해서만 작업을 수행해야 합니다.입니다.componentDidMount예를들면.

setState 콜 검토

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

아이디어

setState는 비동기 함수로 호출할 수 있습니다.

그래서 당신은 믿을 수 없다.this위의 콜이 비동기 함수 내에서 발신된 경우this는 그 시점에서의 컴포넌트 상태를 참조하지만, 이는 setState 호출 시점의 속성 내부 상태를 참조하거나 비동기 태스크의 시작을 참조할 것으로 예상했습니다.또한 작업이 비동기 호출이었기 때문에 해당 속성은 시간이 지남에 따라 변경되었을 수 있습니다.따라서 사용할 수 없습니다.this키워드에서는 스테이트의 속성을 참조하기 위해 previousState 인수를 사용하여 setState가 아직 시작되지 않은 상태에서 setState call prevState를 사용하여 스테이트를 갱신할 때 setState는 prevState 인수를 prevState로 지정합니다.nextState가 파손되지 않도록 신뢰성 확보.

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

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

콜백 기능을 가진 setState를 사용한 올바른 코드:

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

따라서 방금 속성에서 취득한 값을 기반으로 현재 상태를 다음 상태로 갱신해야 할 경우 이 모든 것이 비동기 방식으로 발생할 경우 setState를 콜백 함수로 사용하는 것이 좋습니다.

여기 코데펜으로 설명하려고 했는데 코드펜

경우에 따라서는 setState 직후에 상태가 갱신되고 있는 것을 확인할 수 있는 조작을 실행할 필요가 있는 코드 블록이 필요합니다.여기서 setState 콜백이 실행됩니다.

예를 들어 고객 20명 중 2명의 고객에게는 모달(modal)을 활성화해야 하는 시나리오가 있었는데, 이를 활성화한 고객에게는 API 호출을 받는 시간이 정해져 있어 이렇게 되어 있었습니다.

async componentDidMount() {
  const appConfig = getCustomerConfig();
  this.setState({enableModal: appConfig?.enableFeatures?.paymentModal }, async 
   ()=>{
     if(this.state.enableModal){
       //make some API call for data needed in poput
     }
  });
}

렌더 함수의 UI 블록에서도 enableModal boolean이 필요했기 때문에 여기서 setState를 실행했습니다.그렇지 않으면 API set를 호출하거나 호출하지 않아도 됩니다.

언급URL : https://stackoverflow.com/questions/42038590/when-to-use-react-setstate-callback