Реквизиты компонента, отображаемого внутри маршрута, никогда не обновятся - PullRequest
Новая
       38

Реквизиты компонента, отображаемого внутри маршрута, никогда не обновятся

0 голосов
/ 22 октября 2019

Я пытаюсь получить информацию о пользователе для входа в систему из компонента входа в систему, чтобы компонент приложения мог передавать информацию о пользователе для входа в систему в основной компонент.

Вот некоторый код в приложении. js: 

state = {
   usersArr: [],     // all the users
   logInUser: 0,    // the login user, default value as 0
}
getLogInUser = () => {
    return this.state.logInUser;
}
assignLogInUser = user =>{
    this.setState({logInUser: user});
    console.log("LogIn: " + this.state.logInUser.username);

}
render(){
return(
    <div className="App">
        <Router>
            <div className="App">
                <Switch>
                    <Route path="/main" exact render={() => <Main logInUser={() => this.getLogInUser()}/>}/>
                    <Route path="" exact render={() => <Landing usersArr={this.state.usersArr} getUser = {this.assignLogInUser}/>}></Route>
                </Switch>
            </div>
        </Router>
)
}

Первая страница будет целевой страницей, и будет получен целевой компонент. Компонент посадки будет отображать компонент входа в систему. Компонент входа в систему проверит, соответствуют ли имя пользователя и пароль ввода любому пользователю в usersArr. Если он совпадает, компонент входа в систему вызовет assignLogInUser для назначения пользователя входа в систему.

landing.jsx: 

render(){
   return(
       <Login usersArr={this.props.usersArr} getUser={this.props.getUser}/>
   )
}

login.jsx: 

constructor(props){
        super(props);
        this.userName = React.createRef();    // username referrence
        this.password = React.createRef();    // password referrence
    }
validateLogin = () => {
    this.props.usersArr.forEach(user => {
        if(user.username === this.userName.current.value && user.password === this.password.current.value){
                this.props.getUser(user);
        }
    })
}

Проблема в том, что logInUser, переданный в main, всегда равен 0.

Похоже, что после настройки маршрута он никогда не обновит компонент, который будет отображаться. Независимо от того, что я пытался, я бы получил значение по умолчанию 0 для logInUser в главном компоненте.

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

У меня естьпробовал forceUpdate () в основном компоненте или используя ключ в основном компоненте. Ни один из них не работает.

Любая помощь будет оценена.

...