状態を設定し、新しい検索を実行する

Question

私はこのReactアプリケーションを持っています。そのReactアプリケーションは、babelによってコンパイルされ、webpackによってバンドルされています。

私はこのスニペットを持っている時刻表ページ TimetableManagePage.jsで

：誰かがこの上の矢印をクリックした場合

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

アイデアは、次のとおりです。

それは、次または前の週に移動します。

searchSessionsはtodayの状態で実行され、previousWeekとnextWeekが更新されます。しかし、検索が実行されたときに状態が更新されないことがわかりました。

this.props.actions.searchSessions更新Reduxのストア状態なので、コンポーネントに新しい小道具を設定します...

は今、私はこの検索は、実際にrender機能に属しているかもしれない、すべての状態は、それまでに変更されるべきであると考えました。..ただし、コンポーネントの状態が変化すると、renderが再実行されます。つまり、検索の呼び出しが多発する可能性があります。

今日の状態だけが更新されたときに新しい検索を実行するには、どのような方法が最適ですか？私はあなたがshouldComponentUpdate（nextState）機能を追加する必要があり、今日の状態が更新されると、それだけであなたのページを更新します

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

を比較する必要がありcomponentWillUpdate

Answer 1

されているはずです。その後、あなたはcomponentWillUpdateから呼び出すことができます。

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