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

Question

在我的用户注册页面上的 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);
 }
 })
 }

当我检查时一切正常 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() 异步行为示例：

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>

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

onChange event Function is Lagging In My React App

javascript

reactjs

event-handling

onchange

html-input