关于 setState 的函数的 componentWillMount 警告 [重复]答案

【问题标题】：componentWillMount warning on function that setState [duplicate]关于 setState 的函数的 componentWillMount 警告 [重复]
【发布时间】：2018-06-29 10:56:53
【问题描述】：

我的渲染方法中有一个简单的清除按钮

<Button onClick={this.clearFilters(data)}> CLEAR </Button>

调用清除状态的函数

  clearFilters(data){
   if (!data || !this.state) {
     return;
   }

   const blankFilter = '';
    this.setState({
      filter: blankFilter });
}

但是，如果我添加 setState 行，我会收到大量警告，而且它会完全冻结。

警告：在现有状态转换期间无法更新（例如在render 或其他组件的构造函数中）。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移至componentWillMount

如何在 componentWillMount 中实现这一点？

【问题讨论】：

这是因为无限循环，onClick期待一个函数，使用这个：onClick={() => this.clearFilters(data)}

标签： reactjs

【解决方案1】：

我建议你将这个<Button onClick={this.clearFilters(data)}> CLEAR </Button> 更改为<Button onClick={()=>{this.clearFilters(data)}}> CLEAR </Button>。我认为您的按钮 onClick 方法在渲染时尝试执行 clearFilters 函数，因此出现错误

【讨论】：

是的....修复了它。谢谢
@EvilEddie 请接受它作为答案然后

【解决方案2】：

this.clearFilter(data) 正在立即执行；这是一个函数调用。用户点击时不会发生这种情况。

改成<Button onClick={() => this.clearFilters(data)}> CLEAR </Button>

此外，您为什么要在componentWillMount 中这样做？为什么不将状态最初设置为应有的状态？比如……

constructor(props) {
  super(props);
  this.state = { ... };
}

祝你好运！

【讨论】：