Javascript 在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

，上一周的

和下一周的
更新了该状态。但是，我发现在运行搜索时状态没有更新

this.props.actions.searchSessions
更新redux存储状态，因此将在组件上设置新的道具

现在，我想也许这个搜索实际上属于
render
函数，所有状态都应该在那时改变。。。但是，组件中的任何状态更改都会导致重新运行
渲染
，这意味着对搜索的调用可能会超过应有的负载

只有“今日”状态更新时，执行新搜索的最佳方式是什么？我是否应该查看
您应该添加shouldComponentUpdate（nextState）函数并进行比较

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

然后，它只会在今天状态更新时更新您的页面。之后，您可以从componentWillUpdate或任何您想要的地方调用它

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

但是
今天
并不是组件上的唯一状态，还有
正在保存
，
显示模式
，
正在加载
…在那里，您将把代码添加到组件中，并将更新（nextState），如果（state.today已更改）执行某些操作，则再次执行相同的操作。。对于它，我只添加了只运行一次的功能。我使用的是
组件diddupdate
，这样所有状态更改都会执行，但在完成之后，我会检查今天是否更改了
，并相应地运行搜索