reactjs 加载数据前显示空数据-React暂停

brc7rcf0 于 2023-03-08 发布在 React

关注(0)|答案(1)|浏览(122)

我在应用中实现了React中的Suspense。
我有这个代码在页面：

const Articles = React.lazy(() => import("./../components/Articles/Articles"));

...

<Suspense fallback={<ArticlesSkeletons />}>
    <Articles selectedCategories={selectedCategories} />
</Suspense>

在Articles中，我获取数据并显示它：

const [articles, setArticles] = useState<Article[] | null>(null);

useEffect(() => {
    // fetch data and store to articles state
}, [articles]);

return (
        articles && (
            <div>
                <div>
                    {articles.map((article, index) => {

                        return (
                            // my structure
                        );
                    })}
                </div>
                )}
            </div>
        )
    );

- 问题**：我可以看到显示的 backbone ，但当它消失时，它不是有文章列表，而是空的一秒钟。
页面加载
backbone 出现
一秒钟内未显示文章
显示所有文章。

为什么我有一秒钟没有文章？只要没有加载数据，它就应该显示skelton

reactjs

来源：https://stackoverflow.com/questions/75649677/empty-data-displayed-before-data-is-loaded-react-suspense

1条答案

按热度按时间

5vf7fwbs1#

在提取文章时，您不会呈现 backbone 。
试试这个：

const [articles, setArticles] = useState<Article[] | null>(null);

useEffect(() => {
    // fetch data and store to articles state
}, [articles]);

return (
    articles ? (
        <div>
            <div>
                {articles.map((article, index) => {

                    return (
                        // my structure
                    );
                })}
            </div>
            )}
        </div>
    ) : <ArticlesSkeletons />
);

如果存在以其他方式呈现 backbone 的冠词，则有条件地呈现冠词。
请注意，您还应该处理错误情况。此外，是否真的需要暂停？在客户端呈现的应用中使用暂停通常是为了代码拆分（减少初始捆绑包大小）。这似乎是一个非常轻的组件，使用暂停可能是不必要的。

赞(0）回复(0）举报 2023-03-08

我来回答

reactjs 加载数据前显示空数据-React暂停

1条答案

相关问题

热门标签

最新问答