Обещание не возвращая маршрут

Question

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

Это работало нормально, когда у меня была простая синхронная проверка в локальном хранилище, но когда я ввел вызов Axios на сервер, все стало грязно.

Я прочитал много вопросов SO по аналогичным вопросам, т. Е. Обещаниям, которые не возвращают значение, и я, кажется, изменил свой код, чтобы он соответствовал обычным ошибкам.

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

В приведенном ниже коде console.logs правильно выводит параметрыЭто означает, что ошибка связана с оператором возврата.

Конкретная ошибка:

Ошибка: AuthRoute (...): ничего не было возвращено при рендеринге.Обычно это означает, что отсутствует инструкция возврата.Или, чтобы ничего не отобразить, верните null.

import React from 'react';
import PropTypes from 'prop-types';
import { Redirect, Route } from 'react-router-dom';
import axios from 'axios';

const PRIVATE_ROOT = '/account';
const PUBLIC_ROOT = '/';

const RenderRoute = ({response, isPrivate, Route, Redirect, component, ...props}) => {
    console.log('is_logged', response.data.is_logged); // boolean
    console.log('isPrivate', isPrivate); // boolean
    console.log('response', response); // axios object
    console.log('route', Route); // function route
    console.log('component', component); // home component
    console.log('props', {...props}); // route props
    if (response.data.is_logged) {
        // set last activity on local storage
        let now = new Date();
        now = parseInt(now.getTime() / 1000);
        localStorage.setItem('last_active', now );

        return isPrivate
        ? <Route { ...props } component={ component } />
        : <Route { ...props } component={ component } />;
    } else {
        return isPrivate
        ? <Redirect to={ PUBLIC_ROOT } />
        : <Route { ...props } component={ component } />;
    }
}

const AuthRoute = ({component, ...props}) => {
    const { isPrivate } = component;
    let last_active_client = localStorage.getItem('last_active') ? localStorage.getItem('last_active') : 0;
    let data = {
    last_active_client: last_active_client
    }
    let getApiSession = new Promise((resolve) => {
        resolve(axios.post('/api-session', data));
    });
    getApiSession.then(response => RenderRoute({response, isPrivate,Route, Redirect, component, ...props})
).catch((error) => {
        console.log(error);
 });
 }


export default AuthRoute;

Answer 1

Это то, что сработало для меня после комментариев выше.Необходимо было создать отдельный компонент класса.Это не очень элегантно, но работает.

Код должен быть помещен в componentWillReceiveProps (), чтобы он обновлялся на каждом новом объекте.Я знаю, что componentWillReceiveProps () устарела.Я буду обращаться с этим отдельно.

/ auth / auth.js

import React from 'react';
import RenderRoute from './components/render_route';


const AuthRoute = ({component, ...props}) => {
    let propsAll = {...props}
    return (
        <RenderRoute info={component} propsAll={propsAll} />
    )
}

export default AuthRoute;

/ auth / components / render_route.js

import React from 'react';
import PropTypes from 'prop-types';
import { Redirect, Route } from 'react-router-dom';
import axios from 'axios';


const PRIVATE_ROOT = '/account';
const PUBLIC_ROOT = '/';

class RenderRoute extends React.Component {
constructor (props) {
    super(props);
    this.state = {
        route: ''
    }
}

componentWillReceiveProps(nextProps, prevState){
    const { isPrivate } = this.props.info;
    let last_active_client = localStorage.getItem('last_active') ? localStorage.getItem('last_active') : 0;
    let data = {
        last_active_client: last_active_client
    }
    axios.post('/api-session', data).then(response => {
        let isLogged = response.data.is_logged;

        if(response.data.is_logged) {

            // set last activity on local storage
            let now = new Date();
            now = parseInt(now.getTime() / 1000);
            localStorage.setItem('last_active', now );
            this.setState({ route: isPrivate
                ? <Route { ...this.props.propsAll } component={ this.props.info } />
                : <Route { ...this.props.propsAll } component={ this.props.info } />
            })
        } else {
            this.setState({ route: isPrivate
                ? <Redirect to={ PUBLIC_ROOT } />
                : <Route { ...this.props.propsAll } component={ this.props.info } />
            })
        } 
    }).catch((error) => {
        console.log(error);
    });
}

render() {
    return (
    <div>
        {this.state.route}
    </div>
    )
}

}

export default RenderRoute;