如何避免重复执行同一个事件？

Question

在我执行以下操作之前，我的组件的事件运行良好：

1. 通过单击选项菜单并通过 路由器访问另一个组件。
2. 我回到原来的样子 组件。

当我这样做时，我的组件的事件重复了。 因此，例如，handleAddTask 事件的执行次数与其他菜单选项上的点击次数相同。 如果我不触发任何到另一个模块的路由，那么事件运行良好并且不会重复。

Answer 1

不要使用 click 事件，例如

<div onClick={this.clickHandler.bind(this)} ... >

在constructor

中使用绑定

constructor() {
  this.clickHandler = this.clickHandler.bind(this);
}

---

在onClick={this.clickHandler.bind(this)}中，每次渲染刷新时都会绑定此点击

不是在渲染函数中绑定事件，而是在 contructor 中绑定事件。

Answer 2

组件卸载时附加在 componentDidMount 上的事件侦听器不会消失，因此每次重新安装组件时我都会获得一组新的侦听器。