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分配登录用户。

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

问题在于，传递给main的logInUser始终为0。

就像设置了路线之后，它将永远不会更新将要渲染的组件。无论我尝试什么，我都会在主要组件中将logInUser的默认值设置为0。

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

我在主要组件中尝试过forceUpdate（），或者在主要组件中使用了key。它们都不起作用。

任何帮助将不胜感激。

在路线内渲染的组件的道具永远不会更新

0 个答案: