React.js 立即更新状态

Question

我希望我的状态更新更改以在状态更改时立即显示，但我似乎无法弄清楚为什么不是这样。基本上，当用户单击菜单中的下拉项时，他们单击的项目内部文本......应该在屏幕上显示为 h1，但直到下一次单击才会出现。我怎样才能改变这个？希望我说得有道理。可以找到代码 here.

父组件（APP）：

class App extends React.Component {
  state = {
    loading: true,
    bases: ['USD', 'EUR', 'AUD', 'CAD', 'JPY', 'NZD'],
    selectedBase: null
  };

// 当组件挂载覆盖持续 3 秒

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

    this.onBaseChange('USD');
  }

// 当用户在搜索组件中选择一个新的 Base 时，状态被更新

  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;

子组件（搜索）：


class Search extends Component {
    state = {
        dropdownVisible: false,
        term: '',
        selectedBase: this.props.selectedBase
      };

// 当从下拉列表中单击一个 base 时，selectedBase 被更新，term 被设置回空，下拉列表回到不可见。 // 通过 prop 将 child 的状态传递给 parent // 清除点击时的输入搜索

    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

Answer 1

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

React.js 立即更新状态

React.js Getting State to Immediately Update

javascript

reactjs

react-state