Функция события 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);
 }
 })
 }

все работает нормально, когда я проверяю console.But Проблема заключается в том, когда Я нажал клавишу ввода, состояние имени пользователя пустое, и когда я набираю вторую букву, состояние имени пользователя читает первую букву . поэтому, когда существующее имя пользователя найдено только тогда, когда данные похожи на «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() asyn c:

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>