私はこの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
しかしtoday'は、コンポーネントの状態だけではありません '、' isSaving'、 'showModal'、' loading'があります.... –
があなたがcomponentWillUpdate(nextState)にコードを追加しますと、同じことをもう一度(state.todayが変更された場合)何かをしてください。私はそれを一度だけ実行するように追加しました。 – wertigom
私は 'componentDidUpdate'を使用しています。すべての状態の変更は実行されますが、終了後、' today'が変更されたかどうかを確認し、それに応じて検索を実行します –