ReactJS更新状态未实时传递给子组件

Question

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?

Answer 1

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
  })
}