javascript - 在路由中渲染的组件的 props 永远不会更新

Question

我要做的是从登录组件中获取登录用户的信息，以便 App 组件可以将登录用户的信息传递给主组件。

这是 App.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 来分配登录用户。

登陆.jsx：

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

登录.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);
        }
    })
}

问题是传递给 main 的 logInUser 始终为 0。

看起来一旦设置了路由，它就永远不会更新它要渲染的组件。无论我尝试什么，我都会在主组件中获得 logInUser 的默认值 0。

我可能可以使用 redux，但我必须重构所有代码。

我在主组件中尝试过 forceUpdate() ，或者在主组件中使用 key 。它们都不起作用。

任何帮助，将不胜感激。

标签： javascriptreactjsreact-routerreact-propsreact-component