悬念组件在数据实际加载之前被调用

Question

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

我希望懒负载可以处理的组件，从服务器中获取数据，然后呈现数据。问题是，在悬念标签中获取数据的组件是在数据实际加载之前加载的。这是我的代码：

ernottest.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。阅读此信息，以了解他如何做的完整文章。

这将使您的组件变成

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

如果出于某种原因，获取 - 悬浮包不适合您的需求，那么唯一的方法是在获取数据时在AnotherTest组件中显示加载程序。

请注意，lazy函数是用于代码分解的，因此懒惰加载 JS文件，不等待组件本身中的任何异步。

(也有反应缓存，但他们建议不要在现实世界应用中使用它。(