Компонент Suspense вызывается до фактической загрузки данных - PullRequest
Новая
       40

Компонент Suspense вызывается до фактической загрузки данных

1 голос
/ 23 мая 2019

Я пытаюсь добавить реакцию ленивого в мое приложение, и по какой-то причине оно, похоже, не работает.

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

AnotherTest.jsx 

const AnotherTest = () => {
    const [toDoListData, setToDoListData] = useState([]);

    useEffect(() => {
        async function fetchData() {
            setTimeout(async () => {
                const result = await axios.get(`/api/ToDos/filter/completed`);
                setToDoListData(result.data);
            }, 5000);
        }

        fetchData();
    }, []);

    if (!toDoListData.length) return null;

    return (
        <div>
            {toDoListData.map(item => {
                return <div>{item.name}</div>;
            })}
        </div>
    );
};

Test.jsx 

import React, { lazy, Suspense } from 'react';
const AnotherTest = React.lazy(() => import('./AnotherTest'));

const Testing = () => {
    return (
        <div>
            <Suspense fallback={<div>Loading...</div>}>
                <AnotherTest />
            </Suspense>
        </div>
    );
};

1 Ответ

1 голос
/ 23 мая 2019

Единственный способ, который я знаю о том, что в настоящее время возможно, это использовать fetch-susse . Прочитайте этот для полной статьи о том, как он это сделал.

Это превратит ваш компонент в 

const AnotherTest = () => {
    const toDoListData = useFetch('/api/ToDos/filter/completed', { method: 'GET' });
    return (
        <div>
            {toDoListData.map(item => {
                return <div>{item.name}</div>;
            })}
        </div>
    );
};

Если по какой-то причине пакет fetch-susse не удовлетворяет вашим потребностям, единственный способ - показать загрузчик в самом компоненте AnotherTest при получении данных.

Обратите внимание, что функция lazy предназначена для разделения кода и, следовательно, отложенной загрузки * JS-файла 1016 *, не ожидающего ничего асинхронного в самом компоненте.

(Существует также реагирующий кэш , но они советуют не использовать его в реальных приложениях.)

...