为什么 mapStateToProps 在 componentWillReceiveProps 之前被调用了 2 次？答案

【问题标题】：Why is mapStateToProps being called 2 times before componentWillReceiveProps?为什么 mapStateToProps 在 componentWillReceiveProps 之前被调用了 2 次？
【发布时间】：2018-02-18 07:27:32
【问题描述】：

我有一个动作文件，它连续调用两个动作：

export const navigate =  url => dispatch => {
  dispatch(actions.navigateToUrl(url));
  dispatch(actions.clearNavigateToUrl());
};

商店的更新在我的Components 之一中点击了连接功能：

export default connect(state => ({
    url: state.navigate.url
  })
})(withRouter(Navigate));

然后我有一个componentWillReceiveProps，每次更新state 时都应该点击它。

mapStateToProps 被连续命中 2 次，但我的 componentWillReceiveProps 只被命中第二次，就像有某种批处理一样。我以为setState 中只有批处理。

我可以在action 中的第二个dispatch 周围添加一个setTimeout 而无需等待时间，然后我两次都点击componentWillReceiveProps：

export const navigate =  url => dispatch => {
  dispatch(actions.navigateToUrl(url));
  setTimeout(dispatch(actions.clearNavigateToUrl()));
};

但显然这不是我们想要的，我只是在测试是否是时间问题。

我该怎么做才能解决这个问题？

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

React-Redux 的 connect 函数最终确实使用 setState() 来通知 React 包装器组件需要重新渲染。它还会在根状态对象更新的任何时候重新运行您的mapState 函数。所以是的，这听起来像是预期的行为。您的mapState 将针对两个调度的操作运行，connect 将在内部调用setState() 两次，React 将批量更新并且只重新渲染组件一次。

【讨论】：

那么除了使用setTimeout，最好的处理方法是什么？
您实际上想要完成什么？为什么你需要这两个更改来触发componentWillReceiveProps？