Question

使用路由器对组件进行反应。在 componentDidMount 中有一个api请求来检查用户是否已登录。问题是只显示 LoginPage 组件。可能是因为反应组件 App 在每次路线更改时重新加载，因此 state.isLogged 获取初始值 false 每时每刻？我该如何解决？

class App extends Component {

state = {
    logged: false,
}

async componentDidMount() {
    let logged = await getLoggedStatus(`${serverUrl}:/login`);
    this.setState({ logged: logged });
}



render() {
    return (
        <div style={{ height: '100%' }}>
            <Router>
                <div style={{ height: '100%' }}>
                    <Route path="/login" component={loginPage} />
                    <Route exact path="/dashboard" render={() => (
                        this.state.logged ?
                        (
                            <Dashboard/>
                        ) :
                        (
                            <Redirect to="/login" />
                        )

                    )} />
                </div>
            </Router>
       </div>
    )
}
}

Answer 1

它将始终加载＆＃39; / login＆＃39;页面自最初＆＃39;已记录＆＃39;设置为false。 componentDidMount中的API是一个异步API，当你获得登录状态时，它会调用render（）函数。哪个会加载/登录页面。

由于url将指向/ login，因此状态更改将始终加载/登录页面。

有两种可能的解决方案。

1）如果他已登录，内部渲染功能会将用户重定向到dashborad。

render() {
    return (
        <div style={{ height: '100%' }}>
            <Router>
                <div style={{ height: '100%' }}>
                    <Route path="/login" render={() => (
                        this.state.logged ?
                        (
                            <Redirect to="/dashboard" />
                        ) :
                        (
                            <LoginPage/>
                        )

                    )} />
                    <Route exact path="/dashboard" render={() => (
                        this.state.logged ?
                        (
                            <Dashboard/>
                        ) :
                        (
                            <Redirect to="/login" />
                        )

                    )} />
                </div>
            </Router>
       </div>
    )
}

2）从API获取响应后，将用户重定向到/ dashboard页面。

async componentDidMount() {
    let logged = await getLoggedStatus(`${serverUrl}:/login`);
    this.setState({ logged: logged });
    if(logged) {
        this.context.router.push('dashboard');
    }
}

Answer 2

你应该做的两件事是：

首先：保持加载状态，以便在您的API请求响应不可用时，您不会决定是否重定向到用户登录页面。

其次：检查加载状态变量以决定是要做出决定还是显示加载器

class App extends Component {

    state = {
        logged: false, 
        loading: true
    }

    async componentDidMount() {
        let logged = await getLoggedStatus(`${serverUrl}:/login`);
        this.setState({ logged: logged, loading: false });
    }
    render() {
        if(this.state.loading) {
            return <div>Loading...</div>
        }
        return (
            <div style={{ height: '100%' }}>
                <Router>
                    <div style={{ height: '100%' }}>
                        <Route path="/login" component={loginPage} />
                        <Route exact path="/dashboard" render={() => (
                            this.state.logged ?
                            (
                                <Dashboard/>
                            ) :
                            (
                                <Redirect to="/login" />
                            )

                        )} />
                    </div>
                </Router>
           </div>
        )
    }

}

您的代码无效，因为您在componentDidMount中设置了请求，该请求在呈现后执行，因此即使在请求评估之前您也被重定向

使用react-router从API获取记录状态

2 个答案: