onChange 事件功能在我的 React 应用程序中滞后

Question

在我的用户注册页面上的反应应用程序中，我试图检查天气用户名是否已经存在或者我的代码是否存在

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”+ SOME_KEY_PRESS 时才找到现有用户名 我该如何解决这个...提前谢谢

Answer 1

因为您在state 还旧的时候使用它，因为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() 异步行为示例：

class TestComponent extends React.Component {
  state = {
    data: 1
  }
  
  onClick = () => {
    console.log(`data before set: ${this.state.data}`);
    
    const newData = this.state.data + 1;
    
    this.setState(
      { data: newData }, 
      () => console.log(`data in callback: ${newData}`)
    );
    
    console.log(`data after set: ${this.state.data}`);
    console.log(`actual current data: ${newData}`);
  }
  
  render() {
    return <div onClick={this.onClick}>Click Me!</div>;
  }
};

ReactDOM.render(<TestComponent />, document.getElementById('app'));

#app {
  cursor: pointer;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="app"></div>