상태를 설정하고 새로운 검색 수행하기

Question

나는이 React 앱을 가지고 있는데, 바벨 (babel)로 컴파일되고 webpack에 번들로 묶여있다. 사람이의 화살표를 클릭하면,

nextWeek() { 
    this.setState({ 
     today: this.state.today.clone().add(1, 'w') 
    }); 

    this.searchSessions(); 
} 

previousWeek() { 
    this.setState({ 
     today: this.state.today.clone().subtract(1, 'w') 
    }); 

    this.searchSessions(); 
} 

searchSessions() { 
    this.props.actions.searchSessions({ 
      query: { 
       range: { 
        when: { 
         gte: this.state.today.clone().startOf('week').toISOString(), 
         lte: this.state.today.clone().endOf('week').toISOString() 
        } 
       } 
      } 
     }) 
     .then(() => this.setState({loading: false})) 
     .catch(() => this.setState({loading: false})); 
} 

아이디어는 다음과 같습니다 :

그것은 다음 또는 이전 주에 이동 시간표 페이지 TimetableManagePage.js에서

나는이 조각을 가지고있다.

searchSessions은 today 상태에서 실행되며, previousWeek 및 nextWeek이 업데이트됩니다. 그러나 검색을 실행하면 상태가 업데이트되지 않는다는 것을 알게되었습니다.

this.props.actions.searchSessions 갱신하십시오 REDUX 상태를 저장하므로 구성 요소에 새로운 소품을 설정합니다 ...

지금, 나는 어쩌면이 검색 실제로 render 기능에, 모든 상태가 그때까지 변경해야 속해 있다고 생각 .. 그러나 구성 요소의 상태가 변경되면 render이 다시 실행되어 검색해야하는 것보다 많은 수의 호출이있을 수 있습니다.

오늘 상태 만 업데이트 된 경우 새로운 검색을 수행하는 가장 좋은 방법은 무엇입니까? 내가 componentWillUpdate

Answer 1

보고해야 하는가 당신은 shouldComponentUpdate (nextState) 함수를 추가해야합니다 오늘 상태가 업데이트 될 때 다음은 당신의 페이지를 업데이트합니다

shouldComponentUpdate(nextState){ 
if(nextState.today != this.state.today) 
    return true; 
} 

을 비교해야한다. 그 후에는 componentWillUpdate에서 호출하거나 원하는 것을 언제든지 호출 할 수 있습니다.

componentWillUpdate(nextState){ 
    if(nextState.today!=this.state.today){ 
    doIt(); 
    } 
}