ReactJS + Flux：當我在組件之間路由時，Action接收了兩次

Question

我使用React，Router和Flux制作的小應用程序。
我有2條路線：

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

和卡組件在董事會內部呈現。 卡片有onClick事件向Store發送動作，發出事件“cardClicked” 。 Board組件監聽此操作並執行一些操作：

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

  }

一切正常但是當我路由到Table組件然后回到Board並觸發onClick in Card時應用程序崩潰了。 我發現董事會聽了兩次“ cardClicked”事件（每次點擊都會出現兩次“收到點擊動作”消息）。 如果我再次路由到Table並返回Board，則消息會出現三次等，就像每次Board組件安裝一樣，它會添加另一個“函數”來監聽“cardClicked”事件。

怎么預防？ 是否有一些函數可以讓組件在卸載時停止偵聽此事件，然后在安裝時再次開始偵聽？

Answer 1

您在組件安裝時添加了一個偵聽器，但是您永遠不會刪除它。 每次安裝此組件時，它將運行它的componentWillMount方法，添加一個新的偵聽器。 你的代碼中沒有任何內容可以刪除它們，因此它們會累積起來是有道理的。

您可以使用'componentWillUnmount`生命周期方法刪除您的事件偵聽器，該偵聽器應解決多個事件的問題。 也就是說，我不明白為什么這應該導致任何類型的崩潰，所以你很可能有另一個未被發現的問題。