Question

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

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

调用清除状态的函数

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

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

但是，如果我添加setState行，我会收到大量的警告，并且很好地冻结了。

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

我如何在componentWillMount中实现它？

Answer 1

我建议您将此<Button onClick={this.clearFilters(data)}> CLEAR </Button>更改为<Button onClick={()=>{this.clearFilters(data)}}> CLEAR </Button>。我认为您的按钮onClick方法正在尝试执行clearFilters函数，因为它会呈现错误

Answer 2

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

将其更改为<Button onClick={() => this.clearFilters(data)}> CLEAR </Button>

此外，您为什么要在componentWillMount中执行此操作？为什么不把状态最初设置为它应该是什么？有点像...

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

祝你好运！

对setState函数的componentWillMount警告

2 个答案: