Question

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

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

和卡组件在Board内呈现。卡有 onClick 事件向Store发送操作，该操作会发出事件＆＃34; cardClicked＆＃34; 。 Board组件监听此操作并执行一些操作：

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

  }

一切正常但是当我路由到Table组件然后回到Board并激活卡中的 onClick 时，应用程序崩溃了。我发现董事会听了这个＆＃34; cardClicked＆＃34; 事件＆＃39;两次＆＃39; （此＆＃34;收到点击操作＆＃34;每次点击都会出现两次消息）。如果我再次路由到Table并返回Board，则消息会出现三次等，就像每次Board组件安装一样，它会添加另一个＆＃39;功能＆＃39;听＆＃34; cardClicked＆＃34; 事件。

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

Answer 1

您在组件安装时添加了一个侦听器，但是您永远不会删除它。每次安装此组件时，它将运行它的componentWillMount方法，添加一个新的侦听器。你的代码中没有任何内容可以删除它们，因此它们会累积起来是有道理的。

您可以使用'componentWillUnmount`生命周期方法删除您的事件侦听器，该侦听器应解决多个事件的问题。也就是说，我不明白为什么这会导致任何类型的崩溃，所以你很可能还有另一个未被发现的问题。

ReactJS + Flux：当我在组件之间路由时，Action接收了两次

1 个答案: