为什么反应骨架不渲染？

Question

我有一个组件Recommended可以对 firebase 进行服务调用并呈现返回的数据。在数据库调用的加载延迟期间，我想渲染一个反应骨架，如下所示：

推荐.js

import { useState, useEffect } from "react";
import Skeleton from "react-loading-skeleton";
import { getVenues } from "../services/firebase";
import VenueCard from "./VenueCard";

const Reccomended = () => {
  const [venues, setVenues] = useState([]);

  useEffect(() => {
    async function getAllVenues() {
      const response = await getVenues();
      await setVenues(response);
    }
    getAllVenues();
  }, []);

  venues[0] ? console.log(true) : console.log(false)

  return (
    <div>
      {!venues[0] ? (
        <>
          <Skeleton />
        </>
      ) : (
        <>
          <p className="recommended">Recommended for Josh</p>
          <VenueCard venues={venues} />
        </>
      )}
    </div>
  );
};

export default Reccomended;

然而，骨架在加载过程中并没有撕裂。返回的数据保存到状态变量中venues，我使用“真实性”作为渲染的条件。我通过记录以下内容对此进行了测试：

venues[0] ? console.log(true) : console.log(false)

在浏览器中它最初记录了false，然后很快出现true 因此鉴于此，我不明白为什么骨架没有加载 - 有什么建议吗？
我还传递了<Skeleton/>没有改变任何内容的参数。

Answer 1

您必须包含 CSS 样式，否则您将看不到任何内容。只需添加

import "react-loading-skeleton/dist/skeleton.css";

与其余的进口。

这记录在包自述文件中的反应加载骨架基本用法部分