React中onClick事件触发setState报错问题咨询

哦，这个报错我太熟了！问题出在你给onClick绑定函数的方式上——你现在是直接在render的时候调用了this.someFn(Brands[brand])，而不是把函数本身传给onClick当回调。

为什么会触发这个警告？ #

React要求render方法必须是纯函数：它只能根据当前的props和state返回JSX，不能在执行过程中修改状态（比如调用setState）。你现在的写法会让someFn在组件渲染的过程中就立刻执行，如果someFn内部包含setState操作，就相当于在渲染还没完成的时候就尝试更新状态，这就违反了React的规则，自然会抛出这个警告。

三种修复方案 #

1. 用箭头函数包裹回调

这是最直观的写法，把函数调用包裹在箭头函数里，让onClick拿到的是一个待执行的函数，只有用户点击时才会触发：

<a key={brand} onClick={() => this.someFn(Brands[brand])}>

2. 让someFn返回一个函数（类字段语法）

如果你的项目支持ES7类字段语法，可以把someFn改成返回函数的形式，这样调用this.someFn(Brands[brand])时会返回一个绑定了参数的回调函数：

// 类内部定义
someFn = (brandData) => () => {
  // 这里写你的业务逻辑，比如 setState
  this.setState({ selectedBrand: brandData });
}

// JSX中使用
<a key={brand} onClick={this.someFn(Brands[brand])}>

3. 使用bind绑定参数

利用Function.prototype.bind生成一个绑定了参数和this的新函数，同样只会在点击时执行：

<a key={brand} onClick={this.someFn.bind(this, Brands[brand])}>

额外注意 #

哪怕someFn里没有setState，你当前的写法也有问题——因为每次组件render时都会执行一遍someFn，可能带来不必要的性能开销或者意外的副作用。所以不管怎样，都要确保传给onClick的是一个函数引用，而不是函数调用的结果。

内容的提问来源于stack exchange，提问作者sonia maklouf