这些是我的App.js
。在这里,我有一个基本的注册/登录功能,但问题是this.state.err
登录或注册中生成的错误在 App.js 中更新了我通过记录它的值来验证它,但是当我将它
<Splitwise />
作为道具传递给它时,该值是初始状态集在构造函数中!
class App extends Component{
constructor(){
super();
this.state = { page:1 , signupLogin: 0, logged: false, auth: false, err: 0};
this.user = { username: '', avatar: ''};
this.demo = { username: 'Rounak Polley',email: 'abc@def.ghi', password: 'ijkl'};
this.err = { no: 0 };
}
我已经尝试过使用这两种情况,结果是一样的this.state.err
!this.err.no
error(val){
this.state.err = val;
//this.setState({err: val}, function(){console.log("error in app.js - "+this.state.err);});
/*
if(val === 1) {alert("You have entered an invalid email address!"); }
else if(val ===2) {alert("Whoops! We couldn’t find an account for that email address and password."); }
else if(val === 3) {alert("All fields are required!"); }
*/
}
signup = (newUser) => {
console.log(newUser);
if((newUser.username==='')||(newUser.email==='')||(newUser.password==='')){
this.error(3); console.log("error in app.js - "+this.state.err);
}
else if(!this.ValidateEmail(newUser.email)){
this.error(1); console.log("error in app.js - "+this.state.err);
}
else{
//---// save data
console.log('saved new-user credentials');
//goto login page (values are already copied)
this.setState({signupLogin: 1});
}
};
login = (authUser) => {
console.log(authUser);
//error : 1 wrong email format
//---// authenticate user set this.state.auth : true
if((authUser.email === this.demo.email) && (authUser.password === this.demo.password)){
this.state.auth = true;
this.user.username = this.demo.username;
}
else{
//error : 2 wrong username/password
//this.setState({err: 2}); not working why?
//console.log("error in app.js - "+this.state.err);
this.error(2);
console.log("error in app.js - "+this.state.err);
}
if(this.state.auth){
console.log('authenticated user');
this.setState({logged: true});
//get user name and other data and populate the 'this.user'
//page 2
//this.setState({page: 2});
}
};
logout(){ this.setState({logged: false, signupLogin: 1}); }
render(){
return(
<div className="App">
<MuiThemeProvider muiTheme={muiTheme}>
<SplitWise page={this.state.page}
onTitleClick={this.onTitleClick.bind(this)} signupLogin={this.state.signupLogin}
signupPage={this.signupPage.bind(this)} loginPage={this.loginPage.bind(this)}
signup={this.signup.bind(this)} login={this.login.bind(this)}
logged={this.state.logged} username={this.user.username}
logout={this.logout.bind(this)} err={this.state.err}
/>
</MuiThemeProvider>
</div>
);
}
}
所有其他状态signupLogin
或logged
行为完全符合预期我知道更新状态是异步的。在 ReactJS 中。那么,我该如何解决呢?