为什么反应骨架不呈现？

Question

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

Recommended.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中，我使用'truthiness‘作为呈现的条件。我通过记录以下内容对此进行了测试：

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

在浏览器中，它最初记录的是false，然后是true，因此，考虑到这一点，我不明白为什么骨架没有加载--有什么建议吗？

我还将参数传递到<Skeleton/>，它没有改变任何东西。

Answer 1

您必须包括CSS样式，否则您将看不到任何东西。只需加上

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

其余的进口品。

这在反应加载.骨架基本使用部分中的自述包中有记录。