javascript - 警报未显示 react js中的更新状态？

Question

我正在开发一个应用程序，其中有一个表单，用户在文本字段中输入一个值，然后在单击提交按钮时将该值传递给子组件。要传递给子级的变量 (var1) 的状态是随着输入框中的每次更改而设置的，因此更改的值会随着每次更改而传递给子级。为了防止这种情况，我又声明了一个变量 (finalVar1)，并仅在单击提交按钮时将其状态设置为 var1 的状态，并传递 FinalVar1。但是，当我在设置其状态后尝试警报(finalVar1)时，即使 var1 不是，它也始终为空。这是我的代码

class Parent extends Component{
    constructor(props) {
        super(props);
        this.state = {var1:"",finalVar1:""};
        this.setVar1 = this.setVar1.bind(this)


      } 

    setVar1(e){

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

    submitClick(){
        this.setState({ finalVar1: this.state.var1 });
        alert(this.state.var1 +" "+this.state.finalVar1) //var1 is not blank, finalVar1 is blank
    }
    render(){
        return (<div>
        <form>

            <input  type="text" onChange={ this.setVar1 }/>

            <button onClick={this.submitClick.bind(this)}>Submit</button>
            <Child var1={this.state.finalVar1} />
        </form>
        </div>);
    }
}

Answer 1

在 React 中，状态更新是异步的，这意味着在设置后尝试 console.log 或警告下一个值是行不通的。基于类的组件的 setState 函数允许第二个 callback保证在状态更新后调用参数。

submitClick(){
  this.setState(
    { finalVar1: this.state.var1 },
    () => alert(this.state.var1 + " " + this.state.finalVar1)
  );
}