Question

编辑：没关系，这是一个错字。我从状态传递了brokersListFilter而不是使用事件值。

我正在尝试创建一个过滤器组件，该组件允许用户过滤来自Web服务Get request的数据。我的代码：

    <TextField
      id="filter"
      helperText={labels.filterHelperText}
      value={this.props.brokersListFilter}
      onChange={this.onFilterChange}
      className={this.props.classes.textField}
      }}
    />

还有onFilterChange：

 onFilterChange = (event) => {
   this.props.setBrokersListFilter(event)
   this.props.getBrokers(this.props.brokersListPage, this.props.brokersListFilter)
 }

该代码有效，但带有“延迟”，例如，如果我键入“ 222”，则数据按“ 22”进行过滤，则删除“ 222”至“ 22”中的数字时，删除同样适用然后数据将被“ 222”过滤。就像它正在使用最后一个状态而不是当前状态。为什么会这样？

Answer 1

我怀疑由于setState是actually async的事实而发生了。

Answer 2

这是因为更新了全局商店变量brokersListFilter并在下一行使用props值getBrokers调用函数brokersListFilter不会在商店中更新。您可以按以下方式尝试使用componentDidUpdate，并从this.props.getBrokers函数中删除行onFilterChange。

componentDidUpdate(prevProps){
  if(this.props.brokersListFilter !== prevProps.brokersListFilter){
   this.props.getBrokers(this.props.brokersListPage, this.props.brokersListFilter)
 }
}

反应onChange事件未正确更新

2 个答案: