javascript - react 回调

Question

有人可以向我解释一下为什么这段代码有效

renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

但如果删除元素 onClick 值中的箭头功能

renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={this.handleClick(i)}
      />
    );
  }

它给了我错误警告:无法在现有状态转换期间更新(例如在 render 内)。 Render 方法应该是 props 和 state 的纯函数。%s
完整代码可以在这里找到 https://codepen.io/gaearon/pen/KmmrBy?editors=0010

Answer 1

如果你想使用第二个例子......你必须使用双箭头函数..因为每次你渲染那个组件你都会执行this.handleClick(i)这会导致您无限执行该函数，为了避免这种行为，请使用双箭头函数:

const handleClick = i => e => {
    // do anything with i here ...
}