在数据实际加载之前调用 Suspense 组件

Question

我正在尝试在我的应用程序中添加 react lazy，但由于某种原因，它似乎不起作用。

我希望延迟加载在其中工作的组件从服务器获取数据，然后呈现数据。问题是，在悬念标记中获取数据的组件在数据实际加载之前加载。这是我的代码：

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-suspense。阅读 this 以获取有关他如何做到这一点的完整文章。

这会将您的组件变成

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

如果由于某种原因 fetch-suspense 包不适合您的需要，唯一的方法是在获取数据时在 AnotherTest 组件本身中显示加载程序。

请注意，lazy 函数适用于 code-splitting，因此延迟加载 JS 文件，不等待组件本身的任何异步。

（还有 react-cache 但他们建议不要在实际应用中使用它。）

在数据实际加载之前调用 Suspense 组件

Suspense component gets called before the data actually loads

reactjs

react-suspense