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

Question

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

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

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>
    );
};

Answer 1

Единственный способ, который я знаю о том, что в настоящее время возможно, это использовать 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-файла, не ожидая ничего асинхронного в самом компоненте.

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