React在渲染时无限触发onClick事件

Question

我遇到了一些关于React onClick事件的有趣bug。如果我像这样编写代码：

login = () => {
  this.setState({ authed: true })
  alert(this.state.authed)
}
render() {
  return (
    <div>
      <Loginpage />
      <button onClick={this.login}>test</button>
    </div>
  );

如果将 onClick 更改为 onClick={this.login()}，它将正常运行，但此事件将在渲染时被触发，并且即使更改代码并重新呈现，此事件仍将无限继续。我只是好奇为什么会出现这种情况，有人知道吗？

- Duc Dao

---

显示完整代码！！ - Nikhil S

Answer 1

如果你使用onClick={this.login()}，它会在渲染时立即调用函数，而不是在点击时调用函数，因此你的组件会无限地重新渲染。

- Carlos Saiz Orteu

Answer 2

那么，如果您这样做：

<button onClick={this.login}>test</button>

当你点击按钮时，你正在传递一个对函数 login 的引用。

但如果你这样做：

<button onClick={this.login()}>test</button>

当元素被渲染时，您会立即执行该函数。

login函数触发状态更改：

login = () => {
  this.setState({ authed: true })
  alert(this.state.authed)
}

由于状态改变会触发另一个 render，因此它会进入无限循环。

如果您没有在 login 中调用 setState，它就不会进入无限循环。

只有您的函数会在渲染时执行，即使没有点击按钮。

- Utsav Patel

Answer 3

试试这个

<button onClick={()=>this.login}>test</button>

- Dominic Fernandes

---

<button onClick={()=>this.login()}>test</button> - radovix

<button onClick={()=>this.login()}>测试</button> 这将产生相同的行为。 - Duc Dao