Реагирование componentDidMount, вызывающее начальное мерцание в условных представлениях

Question

Я внедряю постоянный дизайн входа в свое приложение реакции.

Мое приложение будет хранить в localStorage токен от предыдущего входа в систему. При запуске приложения мне нужно расшифровать / проверить этот токен и сохранить свой логин. Если пользователь вошел в систему, то он видит домашнюю страницу, в противном случае он видит целевую страницу. Проблема заключается в том, что мое приложение первоначально будет мигать из состояния «не вошел в систему» ​​в состояние «вошел в систему», что означает, что приложение изначально находится на целевой странице в течение нескольких миллисекунд, а затем оно находится на домашней странице. Это мерцание немного раздражает и, конечно, не очень удачно.

Должен ли я иметь начальный экран загрузки или есть лучший способ справиться с этим сценарием условного представления.

constructor(props){
    super(props);

    this.state = {
        isAuthenticated: false,
        username: null
    };

    this.dispatch = this.dispatch.bind(this);
};

componentDidMount(){
    const token = localStorage.token;
    if (token){
        axios.get('api/users/getUser', {headers: {
            "Authorization": token
        }})
        .then(res => {
            this.dispatch(this.state, {
                type: 'LOGIN', payload: res.data
            })
        })
    }
}

render(){
    return (
        <AuthContext.Provider
            value = {{
                'state': this.state,
                'dispatch': this.dispatch
            }}
        >
            <div className='App'>
                {!this.state.isAuthenticated ? <LandingPage /> : <Home />}
            </div>
        </AuthContext.Provider>
    )
};

Answer 1

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

constructor(props){
    super(props);

    this.state = {
        isAuthenticated: false,
        isAuthenticating: false,
        username: null,

    };

    this.dispatch = this.dispatch.bind(this);
};

componentDidMount(){
    const token = localStorage.token;
    if (token){
        this.setState({ isAuthenticating: true })
        axios.get('api/users/getUser', {headers: {
            "Authorization": token
        }})
        .then(res => {
            this.dispatch(this.state, {
                type: 'LOGIN', payload: res.data
            })
            this.setState({ isAuthenticating: false })
        })
    }
}

render(){
    return (
        <AuthContext.Provider
            value = {{
                'state': this.state,
                'dispatch': this.dispatch
            }}
        >
            <div className='App'>
                {this.state.isAuthenticating ? <Spinner /> : null }
                {!this.state.isAuthenticated ? <LandingPage /> : <Home />}
            </div>
        </AuthContext.Provider>
    )
};