Javascript 搜索结果在第二次单击时显示，而不是在第一次单击时显示_Javascript_Reactjs

Javascript 搜索结果在第二次单击时显示，而不是在第一次单击时显示

javascript reactjs

Javascript 搜索结果在第二次单击时显示，而不是在第一次单击时显示,javascript,reactjs,Javascript,Reactjs,i don’我在做一个搜索结果是在第二次点击时显示的不是第一次反应js我不知道第二次点击时发生了什么这不是动态的，而是使用了统计值谢谢你的帮助 handleChange(e) { this.setState({ value: e.target.value }); } handleSubmit(e) { e.preventDefault(); this.setState({ listArr: this.props.list.filter(e1 => e1 === t

i don’我在做一个搜索结果是在第二次点击时显示的不是第一次反应js我不知道第二次点击时发生了什么这不是动态的，而是使用了统计值

谢谢你的帮助

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>
  );
}

handleChange（e）{
this.setState（{value:e.target.value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
这是我的国家({
listArr:this.props.list.filter（e1=>e1==this.state.value），
});
this.props.searchItem（this.state.listArr）；
}
render（）{
返回(
);
}

第二次单击时显示的内容是异步的，因此在设置状态后，函数的其他部分无法跟上。使用

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

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

setState

是异步的，因此在设置状态后，函数的其他部分无法跟上。使用

setState