Реагирование: обработка рендеринга несобранных данных, маршрутизатор, моб - PullRequest
Новая
       43

Реагирование: обработка рендеринга несобранных данных, маршрутизатор, моб

0 голосов
/ 29 апреля 2020

ребята, у меня есть два компонента, завернутые в компонент, отвечающий за выборку данных и их хранение в хранилище mobx. Внутренние компоненты отображают данные из хранилища. Я хочу отображать компоновки только при получении данных, поэтому я сделал обертки, которые выглядят так (DataProvider. js): 

const DataProvider = inject("userStore", "objectsStore")((props) => {

    const [Fetched, setFetched] = useState(false);
    const {userStore, objectsStore} = props;

    function fetchData() {
        return API.getUser().then(response => {
            userStore.user = response.data
        }).then(
            API.getObjects().then(response => {
                objectStore.objects = response.data
            }).then(() => {
                    swal('data fetched');
                }
            )
        )
    }

    useEffect(() => {
        fetchData().then(() => {
                if (userStore.user)
                setFetched(true)
            }
        ).catch(error => {
            setFetched(false);
        });
    }, []);

    return (
        <>
        {Fetched && <>{props.children}</> }
        {!Fetched && <p>Fetching data...</p>}
    </>)
});

И мои компоненты в приложении: 

class App extends React.Component {


    render() {
        return (
            <>
                <GlobalStyle/>
                <ThemeProvider theme={theme}>
                    <Router history={history}>
                        <Switch>
                            <Route exact path={urls.get('home')}>
                                <Home/>
                            </Route>

                            <AuthProvider>
                                <DataProvider>
                                    <Route exact path={urls.get('dashboard')}>
                                        <Dashboard/>
                                    </Route>
                                    <Route exact path={urls.get('someView')}>
                                        <View/>
                                    </Route>
                                </DataProvider>
                            </AuthProvider>
                        </Switch>
                    </Router>
                </ThemeProvider>
                </>
        )
    }

UserStore: 

@observable user;

ObjectsStore: 

@observable objects = [];

Рендеринг пользователя работает нормально, но у меня проблемы с рендерингом объектов. Когда я добираюсь до компонентов приборной панели, а затем перемещаюсь по объектам через history.pu sh (url), все работает нормально. Но когда я вхожу в View по URL, компоненты как-то рендерится, а данные еще не извлекаются (

TypeError: Cannot read property 'objects' of undefined

В моем представлении: 

const View = inject("objectsStore")((props) => {
const objects = props.objectStore.objects;

Могу ли я как-нибудь действительно остановить рендеринг и ждать получения данных? Или я должен в mobx как-то объявить, что массив объектов появится?

...