Javascript React.js获取要立即更新的状态

我希望我的状态能够更新更改，以便在状态更改时立即显示更改，但我似乎不明白为什么不能。基本上，当用户单击菜单中的下拉项时，这些项将显示内部文本。。。他们单击的图标应该在屏幕上显示为h1，但它在下次单击之前不会显示。我怎样才能改变这个？希望我讲得通。代码可以找到

父组件（应用程序）：

//组件安装时，覆盖将持续3秒

  componentDidMount() {
    setTimeout(() => this.setState({
      loading: false,
    }), 3000)

    this.onBaseChange('USD');
  }

//当用户在搜索组件中选择新的基时，状态将更新

  onBaseChange = newBase => {  
    this.setState({ selectedBase: newBase });
  }

//需要了解如何在状态更新后立即查看状态更改

//呈现内容：

  render(){
    return (
      <>
      {this.state.loading === false ? (
      <div className="App">
        <div id="one">
          <h1>{this.state.selectedBase}</h1>
          <Search bases = {this.state.bases} selectedBase = {this.state.selectedBase} onBaseChange = {this.onBaseChange}/>
        </div>
       </div>
        ) : (
          <Overlay />
        )}
        </>
    );
  }
}

  

export default App;

//从下拉列表中单击某个基础时，所选的基础将更新，术语将设置回空，下拉列表将设置回不可见。 //通过道具将子对象的状态传递给父对象 //在单击时清除输入搜索

    onBaseSelect = (event) => {
        // when an base is clicked from dropdown, the selectedBase is updated, term is set back to empty, and dropdown back to nonvisible.
        this.setState({
            selectedBase: event.target.innerHTML,
            term: '',
            dropdownVisible: false
        })

        // passing state of child up to parent through prop
        this.props.onBaseChange(this.state.selectedBase)
        
        // clearing input search on click
        document.getElementById("input_search").value = "";
    }

render（）{
返回(

{/*根据用户输入筛选出基数组*/}
{this.props.bases.filter（base=>base.includes（this.state.term.toUpperCase（））.map（（filteredBase，index）=>(
{filteredBase}
))}

)
}
}
导出默认搜索

this.setState是一个异步函数，因此

    // passing state of child up to parent through prop
    this.props.onBaseChange(this.state.selectedBase)
    
    // clearing input search on click
    document.getElementById("input_search").value = "";

状态尚未更新。将代码作为回调发送到this.setState，如下所示

 onBaseSelect = (event) => {
    // when an base is clicked from dropdown, the selectedBase is updated, term is set 
     back to empty, and dropdown back to nonvisible.
    this.setState({
        selectedBase: event.target.innerHTML,
        term: '',
        dropdownVisible: false
    },
 ()=>{
     // passing state of child up to parent through prop
    this.props.onBaseChange(this.state.selectedBase)
    
    // clearing input search on click
    document.getElementById("input_search").value = "";
  ); 
}

render(){
        return(
                <div id="search">
                        <div id="dropdown" style={{display: this.state.dropdownVisible ? "block" : "none"}}>
                            <ul>
                                {/* filterng out base array based on users input */}
                                {this.props.bases.filter(base => base.includes(this.state.term.toUpperCase())).map((filteredBase, index) => (
                                        <li onClick = {this.onBaseSelect} key={index}>{filteredBase}</li>
                                ))}
                            </ul>
                        </div>
                 </div>
        )
    }
}

export default Search

    // passing state of child up to parent through prop
    this.props.onBaseChange(this.state.selectedBase)
    
    // clearing input search on click
    document.getElementById("input_search").value = "";

 onBaseSelect = (event) => {
    // when an base is clicked from dropdown, the selectedBase is updated, term is set 
     back to empty, and dropdown back to nonvisible.
    this.setState({
        selectedBase: event.target.innerHTML,
        term: '',
        dropdownVisible: false
    },
 ()=>{
     // passing state of child up to parent through prop
    this.props.onBaseChange(this.state.selectedBase)
    
    // clearing input search on click
    document.getElementById("input_search").value = "";
  ); 
}