Question

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

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

对商店的更新会在我的Component s之一点击连接功能：

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

然后我每次componentWillReceiveProps更新时都应该点击state。

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

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

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

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

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

Answer 1

React-Redux的connect函数最终使用setState()来表示包装器组件需要重新呈现的React。它还将在根状态对象更新时重新运行mapState函数。所以是的，这听起来像预期的行为。您的mapState将针对所有已调度的操作运行，connect将在内部调用setState()两次，并且React将批量更新并仅重新呈现组件一次。

为什么在componentWillReceiveProps之前调用mapStateToProps 2次？

1 个答案: