Javascript onChange事件函数在我的React应用程序中滞后

在我的用户注册页面上的react应用程序中，我试图检查用户名是否已经存在，我的代码是否正确

checkUserName = (e) => {
this.setState({username:e.target.value});
let username = this.state.username;
db.collection("users").doc(username).get()
.then((snapshot)=>{
 if(snapshot.exists)
 {
   this.setState({usernameExistError:"show"}); *//this is classname of error div*
   this.setState({isUsernameOk:false})
   console.log(this.state.usernameExistError,this.state.isUsernameOk);
 }
 else
 {
   this.setState({usernameExistError:"hide"});
   this.setState({isUsernameOk:true})
   console.log(this.state.usernameExistError,this.state.isUsernameOk);
 }
 })
 }

当我检查控制台时，一切正常。但问题是当我在输入中按下一个键时，用户名状态为空，当我键入第二个字母时，用户名状态读取第一个字母。 因此，只有当数据类似于“EXISTINGUSERNAME”+按键时，才能找到现有用户名

---

我该如何解决这个问题呢？提前谢谢你，因为你在

状态仍然很旧的时候使用它，因为
setState（）
是异步发生的

要解决问题，应将该值设置为变量，并在将来使用：

const { target: { value: username } } = e;

this.setState({ username });
db.collection("users").doc(username).get()

// ...the rest of code 

或根据回调中的当前状态执行所有操作：

this.setState({ username: e.target.value }, () => {
  db.collection("users").doc(this.state.username).get()

  // ...the rest of code 
});

setState（）
异步行为示例：


类TestComponent扩展了React.Component{
状态={
数据：1
}
onClick=（）=>{
log（`data before set:${this.state.data}`）；
const newData=this.state.data+1；
这是我的国家(
{data:newData}，
（）=>console.log（`data-in-callback:${newData}`）
);
log（`data after set:${this.state.data}`）；
log（`actual current data:${newData}`）；
}
render（）{
返回点击我！；
}
};
ReactDOM.render（，document.getElementById（'app'））
#应用程序{
光标：指针；
}

FYI
setState
是异步的，当您想立即看到setState上的更新时，您需要使用回调，比如
setState（{key:updated\u value}，（）=>console.log（this.state.key））
，现在您可以直接看到状态更新。我希望这能解决你的问题。谢谢。这对我来说很有效。但我不明白如何…非常感谢你。你需要了解javascript中同步和异步代码执行的概念。