Обновленное состояние ReactJS не передается в реальном времени в качестве реквизита дочернему компоненту

Это мой 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: '[email protected]', 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 javascript react-props
person Rounak Polley    schedule 05.01.2018    source источник
comment
Если вы хотите, чтобы ваш компонент перерисовывался при изменении значения чего-то, вам нужно поместить это что-то в state, поэтому error обязательно должно быть в state. Тогда вы всегда должны вызывать setState при изменении state (не устанавливая начальное значение), можете ли вы изменить на setState в своей функции error?   -  person margaretkru    schedule 05.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

Если я правильно понял ваш вопрос, я считаю, что проблема связана со следующей функцией

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

вам нужно использовать this.setState, чтобы дочерний компонент повторно отображал получение нового состояния в качестве реквизита

// user an arrow function or bind this in the constructor.
error = (val) => {
  this.setState({
    err: val
  })
}
person Ahmed Eid    schedule 05.01.2018
comment
@RounakPolley без проблем. - person Ahmed Eid; 08.01.2018