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-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，但他们建议不要在实际应用中使用它。）

暂挂组件在实际加载数据之前被调用

1 个答案: