Javascript 在React中的现有状态转换错误期间无法更新

在我的render return（）中，我有以下内容：

<button onClick={ this.selectTimeframe('Today') }
        className={ this.setActiveIf('Today') } type="button">Today</button>

^我现在必须注释掉setState，否则我会得到上面发布的错误，应用程序会崩溃

我的构造器中有：

this.selectTimeframe=this.selectTimeframe.bind（this）

我发现了这一点，但它没有意义，我该如何传入变量？还是说每个独特的按钮都需要独特的功能？为了避免在渲染内部调用它

完整代码
从“React”导入React；
导出类TimeframeFilter扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
时间框架：“今天”
};
this.selectTimeframe=this.selectTimeframe.bind（this）；
this.setActiveIf=this.setActiveIf.bind（this）；
}
componentDidMount（）{
console.log（“%c TimeframeFilter component didmount”，“背景：#393939；颜色：#bada55”，此.state）；
}
选择时间表（timeframe）{
//this.setState（{timeframe}）；
}
setActiveIf（时间范围）{
返回this.state.timeframe==时间范围？'btn btn default active'：'btn btn default'；
}
render（）{
返回(
时间框架
今天
周
月
年
全部的
);
}
}
导出默认时间框架过滤器；
您应该使用
箭头函数或绑定方法将值传递给
onClick
函数，否则每次出现重新加载时，它只是执行以将值返回到
onClick
，如果您在其中使用
setState
，它将调用一个
rerender
和要再次调用的函数，从而重复该过程

喜欢吗

<button onClick={ ()=> this.selectTimeframe('Today') }
        className={ this.setActiveIf('Today') } type="button">Today</button>

this.selectTimeframe（'Today'）}
className={this.setActiveIf（'Today'）}type=“button”>Today

或

今天

希望我能给你解释清楚。：）

编辑：尽管上述方法解决了问题，但由于性能原因并非最佳方法。我们应该避免渲染内部的方法绑定，因为在重新渲染期间，它将创建新方法，而不是使用旧方法，这将影响性能

在您当前调用的
this上查看此答案。在渲染方法中选择TimeFrame（'Today'）
。
你可能想

onClick={（）=>this.selectTimeframe（'Today'）}

还是更聪明一点

<button onClick={ this.selectTimeframe.bind(this, 'Today') } className={ this.setActiveIf('Today') } type="button">Today</button>

selectTimeframe.bind(key) {
  switch(key){
    case 'Today':
      //your logic
      break;
  }
}

今天
选择timeframe.bind（键）{
开关（钥匙）{
‘今日’个案：
//你的逻辑
打破
}
}
谢谢，我现在明白了。。。我每次都在调用这个函数。
（）=>
解决了这个问题。很高兴，我能够正确地解释：）
<button onClick={ ()=> this.selectTimeframe('Today') }
        className={ this.setActiveIf('Today') } type="button">Today</button>

<button onClick={ this.selectTimeframe.bind(this, 'Today') }
        className={ this.setActiveIf('Today') } type="button">Today</button>

<button onClick={ this.selectTimeframe.bind(this, 'Today') } className={ this.setActiveIf('Today') } type="button">Today</button>

selectTimeframe.bind(key) {
  switch(key){
    case 'Today':
      //your logic
      break;
  }
}