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

Question

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

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

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 函数用于代码拆分，因此延迟加载 JS 文件，而不是等待组件本身的任何异步。

（还有react-cache，但他们建议不要在现实世界的应用程序中使用它。）