These is my App.js
. Here I have a basic signup/login functionality but the problem is this.state.err
or the error generated in login or signup is updated in App.js I verified it by logging its value but when I pass it down to <Splitwise />
as props the value is the initial state set in the constructor!
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 };
}
I have tried using both this.state.err
and this.err.no
in both cases the result is the same!
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>
);
}
}
All the other states signupLogin
or logged
behaves exactly as expected I know that updating states is async. in ReactJS. So, how can I fix it?
If I understand your question correctly, I believe the issue is related to the following function
error(val){
this.state.err = val;
}
you need to use this.setState
in order for children component to re render receiving the new state as props
// user an arrow function or bind this in the constructor.
error = (val) => {
this.setState({
err: val
})
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.