为什么反应骨架没有渲染

Question

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

推荐.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";

其余的进口产品。

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