ReactJS Redux dispatch重复触发：关闭窗口后cardIndex异常回退

嘿，我一眼就看出问题啦——这是事件冒泡在捣乱！

你看，你的关闭按钮(.close-modal)是嵌套在绑定了openWindow(dateIndex)的.day-card元素里面的。当你点击关闭按钮时，会先触发按钮自己的onClick（调用closeWindow()把cardIndex设为null），但这个点击事件会向上“冒泡”到父元素.day-card，触发它的onClick事件，又把cardIndex设回了当前的dateIndex。所以你才会看到cardIndex先变null，随即又被设回之前的索引。

最直接的解决方法，就是在关闭按钮的点击事件里阻止冒泡，让事件停在按钮这里，不再向上传递给父元素。修改你的关闭按钮代码：

<span className="close-modal" onClick={(e) => {
  e.stopPropagation(); // 阻止事件冒泡到父元素
  closeWindow();
}}>x</span>

这样点击关闭按钮时，只会执行closeWindow()，父元素的openWindow就不会被触发了，cardIndex就能正常设为null，窗口也会关闭。

看你的handleCalendarIndex函数，里面并没有异步操作，其实可以去掉async关键字，简化一下：

export function handleCalendarIndex(calendarIndex) {
  return dispatch => {
    dispatch(changeCalendarIndex(calendarIndex))
  }
}

或者如果changeCalendarIndex是普通的同步action creator，甚至可以直接把它传给mapDispatchToProps，不用额外包一层函数，不过这对你当前的问题没有影响，只是代码更简洁而已~

内容的提问来源于stack exchange，提问作者Nataly Firstova