反应回调答案

【问题标题】：React callbacks反应回调
【发布时间】：2020-09-11 00:15:58
【问题描述】：

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

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 内）。渲染方法应该是 props 和 state 的纯函数。%s

【问题讨论】：

【解决方案1】：

如果您想使用第二个示例...您必须使用双箭头函数。因为每次渲染该组件时，您都会执行this.handleClick(i)，这会导致您无限执行该函数，以避免这种情况行为使用双箭头函数：

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

【讨论】：

【解决方案2】：

onClick 需要一个函数，在第一个示例中，您传递了函数（箭头函数），但第二个示例，它不是函数。另一种方式

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

}

【讨论】：