javascript - 搜索结果显示在第二次单击时，而不是第一次 react js

Question

我进行搜索时发生的情况是搜索结果在第二次单击时显示，而不是在第一次 react 时显示，我不明白第二次单击时发生了什么这不是动态的，使用了静态值

感谢任何帮助

handleChange(e) {
  this.setState({ value: e.target.value });
}

handleSubmit(e) {
  e.preventDefault();
  this.setState({
    listArr: this.props.list.filter(e1 => e1 === this.state.value),
  });
  this.props.searchItem(this.state.listArr);
}

render() {
  return (
    <div>
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          placeholder="Search..."
          onChange={this.handleChange}
        />
        <input type="Submit" value="sech" />
      </form>
    </div>
  );
}

第二次点击时显示什么

Answer 1

setState 是异步的，因此在设置状态后，函数的其他部分将无法跟上。尝试使用 setState 进行回调。

handleSubmit(e){   
     e.preventDefault();
     this.setState({
         listArr:this.props.list.filter(e1=> 
         (e1===this.state.value))
     }, () => this.props.searchItem(this.state.listArr) );  
}

评论后更新

正如我试图解释的，setState 是异步的。它不会立即更新状态。首先，您通过过滤设置状态。但是当您调用 searchItem 函数时，setState 仍在尝试更新状态，它没有完成其工作。因此，您的 listArr 此时仍为空或未更新。因此，您的搜索不起作用。

但是为什么第二次就可以了呢？因为当您第二次点击按钮时，setState 已经完成了它的工作，现在实际上有一个 listArr 了。所以，您的搜索有效。

这里，setState 中的回调函数等待更新，然后调用您提供给它的内容。