Question

这是我的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中。那么，我该如何解决呢？

Answer 1

如果我理解你的问题，我相信这个问题与以下功能有关

error(val){
  this.state.err = val;
}

您需要使用this.setState才能让子组件重新呈现接收新状态作为道具

// user an arrow function or bind this in the constructor.
error = (val) => {
  this.setState({
    err: val
  })
}

ReactJS更新状态未实时传递为子组件的道具

1 个答案: