在我的基本登录应用程序中，我已授权为在我的构造函数中声明的布尔状态。
当我的应用呈现表单的 onSubmit 部分并执行验证函数时，setState 不会将 this.state.isAuthorized 设置为声明的授权变量的值。为什么？我到处用谷歌搜索，我不明白我做错了什么。
感谢您抽出宝贵时间
import React from 'react';
import '../css/bootstrap.css'; // You can download @ getbootstrap.com
import '../css/main.css'; // located in the bottom as a comment
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
users: [
{
"id":1,
"first":"John",
"last":"Doe",
"email":"johnee23@email.com"
},
{
"id":2,
"first":"Alexander",
"last":"Richards",
"email":"alexthegreat44@email.com"
},
{
"id":3,
"first":"Raymond",
"last":"Jefferson",
"email":"rayray007@email.com"
}
],
credentials: [
{
"id":1,
"username":"johnee23",
"password":"abc123"
},
{
"id":2,
"username":"alexthegreat44",
"password":"alexandra"
},
{
"id":3,
"username":"rayray007",
"password":"agentray"
}
],
isAuthorized: false
};
this.validate = this.validate.bind(this);
}
validate(e) {
const username = e.target.querySelector('input[type="text"]').value;
const password = e.target.querySelector('input[type="password"]').value;
let authorized = false;
{this.state.credentials.map(credential => {
if(username === credential.username && password === credential.password) {
authorized = true;
}
//alert(`Going throughnusername: ${credential.username}npassword: ${credential.password}nauthorized?: ${this.state.auth}nnYour input:nusername: ${username}npassword: ${password}`);
alert(`${credential.username} === ${username}: ${credential.username === username}n${credential.password} === ${password}: ${credential.password === password}n${credential.username} === ${username} && ${credential.password} === ${password}: ${credential.username === username && credential.password === password}nauthorized: ${authorized}`)
})}
alert(`authorized after done: ${authorized}`);
// this.state.isAuthorized is not setting to true, even though the
// authorized variable is already true. Confirmed through alert popups
this.setState({
isAuthorized: authorized,
});
// ---------------------------------------------------------------------
alert(`username: ${username}npassword: ${password}nnisAuthorized: ${this.state.isAuthorized}nauthorized: ${authorized}`);
}
render() {
return (
<div>
<header>
<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
<a href="#"><h2 class="navbar-brand">My Login Application</h2></a>
<div class="collapse navbar-collapse">
<div class="navbar-nav right">
<a href="#" className="nav-item nav-link">Home</a>
<a href="#" className="nav-item nav-link">Sign In</a>
</div>
</div>
</nav>
</header>
<br /><br /><br /><br /><br /><br /><br />
<div className="container">
<div className="row">
<div className="col-md-8">
// ----- This is the form that submits on the validate function above ----------
<form action="#" onSubmit={this.validate}>
<h1>Sign In</h1>
<br />
<div class="form-group">
<label for="username">Your Username</label>
<input type="text" className="form-control" id="username" placeholder="Enter Username" />
</div>
<div class="form-group">
<label for="password">Your Password</label>
<input type="password" className="form-control" id="password" placeholder="Enter Password" />
</div>
<br />
<button type="submit" className="btn btn-primary" onClick={this.validate}>Enter</button>
</form>
// -----------------------------------------------------------------------------
</div>
<div class="col-md-4 text-right vl ">
<br />
<h1>Don't have an account?</h1>
<br />
<a href="#" className="btn btn-success" role="button">Sign up here!</a>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div className="container">
<div className="row">
<div className="col-md-4"></div>
<div className="col-md-6">
<br /><br />
<h1>Users</h1>
<ul>
{this.state.users.map(user =>
<div>
<li key={user.id}>Name: {user.first} {user.last}</li>
<li key={user.id}>Email: {user.email}</li>
<br />
</div>
)}
</ul>
<br /><br />
<h1>Credentials</h1>
<ul>
{this.state.credentials.map(cred =>
<li key={cred.id}>{cred.username}: {cred.password}</li>
)}
</ul>
<br /><br />
</div>
<div className="col-md-2"></div>
</div>
</div>
<footer>
<nav class="navbar navbar-light bg-light sticky-bottom">© Lockerroom Buzz: 2019-2020</nav>
</footer>
</div>
);
}
};
// Main.css
// ---------
// .right {
// padding-left: 900px;
// }
//
// .title {
// padding-left: 0px;
// }
//
// .vr {
// border-right: 1px solid;
// }
//
// .navbar {
// background-color: purple;
// width: 100%;
// }
//
// .jumbotron {
// width: 100%;
// }
//
// .center {
// text-align: center;
// margin-left: 25px;
// }
//
// .centralize {
// padding-right: 20px;
// }
//
// .people {
// width: 18rem;
// }
//
// .red {
// color: red;
// }
export default Login;
setState不是同步的，这就是为什么：
this.setState({ isAuthorized: authorized });
console.log(this.state.isAuthorized) // here logs the value prior of the setState
如果要在 setState 之后立即记录，请将回调作为第二个参数传递：
this.setState({ isAuthorized: authorized }, () => console.log(this.state.isAuthorized));
我注意到即使作为第二个参数调用，日志也不会打印。在我看来，this.setState（） 函数没有运行。它跳过了 validate（） 方法中的 this.setState（） 函数。