React/Redux 应用程序中的执行顺序问题答案

【问题标题】：Execution order issue in React/Redux appReact/Redux 应用程序中的执行顺序问题
【发布时间】：2017-08-21 22:27:22
【问题描述】：

我有一个带有日期选择器的 React/Redux 应用程序。

这是我的代码的简化版本：

handleChangeDate(date) {

   // First, I set the new date in my redux store
   this.props.actions.setDate(date);

   // Check some condition
   if(a !== b) {

      // I then call a callback function that is passed as a prop from the parent component
      return this.props.someCallBackFunction();
   }

}

这是发生了什么：

最初一切正常
一旦我设置了新日期，someCallBackFunction() 似乎首先被触发，它从商店中提取活动日期并进行 API 调用。但由于日期尚未更改，我得到的数据与我开始更改日期之前的数据相同
当我再次更改日期时，发生的事情与我上面描述的相同，但它现在使用上一步中的日期。

换句话说，执行顺序是相反的，所以我总是最终得到一个数据集，是我在之前的操作中设置的日期。

知道是什么原因造成的以及如何解决吗？

附：回调函数从 redux 商店获取活动日期，这就是我不传递它的原因。我喜欢使用 redux 存储作为单一事实来源的想法，但我需要解决执行顺序问题。

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

如果是这种情况，您似乎不应该在此处理程序内部处理回调。您是否考虑过使用生命周期方法 componentWillUpdate() ？

看看这里的前几个例子，它们可能会有所帮助。

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/tapping_into_componentwillupdate.html

【讨论】：

非常有趣！我以前从未使用过componentWillUpdate()。我刚刚做了一个快速而肮脏的更新，现在似乎得到了正确的日期。我只需要消化这个新概念。我不经常遇到这个问题，老实说，我不知道为什么我现在遇到它。乍一看，使用componentWillUpdate() 似乎是一个可靠的想法，因为它基于一个确定的事件，因此在其中移动一些逻辑似乎是一个好主意。另一方面，我想知道为什么执行顺序是不可预测的——或者是可预测的，但我不明白。
很高兴听到它有帮助。我认为这一切都回到了这样一个事实，即除非您明确使用生命周期方法，否则没有任何东西会等待您的商店更新。您的事实来源需要以预定义的方式与组件对话，并且在事件处理程序中放置类似的回调只是要求在当前状态与您希望接收的内容之间断开连接。状态确实需要一秒钟的时间来更新，它不像在同一个函数中更新一个变量。
有一点是肯定的：了解componentWillUpdate() -- 谢谢你 -- 很棒。