ReactJS + Flux：当我在组件之间路由时收到两次操作答案

【问题标题】：ReactJS + Flux: Action received twice when I route between componentsReactJS + Flux：当我在组件之间路由时收到两次操作
【发布时间】：2017-09-27 14:24:25
【问题描述】：

我使用使用 React、Router 和 Flux 制作的小应用程序。
我有 2 条路线：

<Route path="/" exact component={Board} />
<Route path="/table" component={Table} />

和 Card 组件在 Board 内呈现。 Card 有 onClick 事件向 Store 发送一个动作，该事件发出事件 "cardClicked" 。 Board 组件监听这个动作并做一些事情：

//Board.js:
componentWillMount() {
    GameStore.on("cardClicked", () => {
      console.log("received click action")
    })

  }

一切正常，但是当我路由到 Table 组件然后返回 Board 并在 Card 中触发 onClick 时，应用程序崩溃了。我发现 Board 会“两次”监听这个“cardClicked” 事件（每次点击都会出现两次“收到的点击操作”消息）。如果我再次路由到 Table 并返回到 Board，则消息会出现 3 次，依此类推，好像每次安装 Board 组件时它都会添加另一个“函数”来监听 "cardClicked" 事件。

如何预防？是否有一些功能可以使组件在卸载时停止侦听此事件，然后在安装时再次开始侦听？

【问题讨论】：

去掉componentWillUnmount方法中的事件监听？
你在使用react-router-reduxv4.0.7吗？

标签： javascript reactjs react-router flux

【解决方案1】：

当组件挂载时，您正在添加一个侦听器，但您永远不会删除它。每次这个组件挂载时，它都会运行它的componentWillMount 方法，添加一个新的监听器。您的代码中的任何内容都不会删除它们，因此它们会累积是有道理的。

您可以使用“componentWillUnmount”生命周期方法来移除您的事件监听器，这应该可以解决多个事件的问题。也就是说，我不明白为什么这会导致任何形式的崩溃，因此您很可能还有另一个未被发现的问题。

【讨论】：