Question

我有这个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成为<body> <button onclick="myFunction()">do it</button> <input type="text" value="" id="top2" /> <input type="text" value="" id="top" /> <select id="myselect"> <option value='toplama'>Toplama</option> <option value='çıkarma'>Çıkarma</option> </select> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> function myFunction() { var sayi1 = document.getElementById('top').value, sayi2 = document.getElementById('top2').value, sonuc, $dropDown = $("#mySelect"); if ($dropDown.val() == "toplama") { sonuc = parseInt(sayi1) + parseInt(sayi2); alert(sonuc); } else if ($dropDown.val() == "çıkarma") { sonuc = parseInt(sayi1) - parseInt(sayi2); alert(sonuc); } } </script> </body>重新运行，这意味着可能会有大量的搜索调用，比应有的更多。

仅更新今天状态时执行新搜索的最佳方法是什么？我应该看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();
   }
}

在React中设置State并执行新的搜索

1 个答案: