为什么反应骨架不渲染？答案

【问题标题】：Why is react skeleton not rendering?为什么反应骨架不渲染？
【发布时间】：2022-02-09 17:20:07
【问题描述】：

我有一个组件 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/> 传递了参数，这并没有改变任何东西。

【问题讨论】：

标签： reactjs react-loading-skeleton

【解决方案1】：

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

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

与其余的导入。

这在 react-loading-skeleton basic Usage section 的包自述文件中有记录

【讨论】：

您可能会认为他们会提到此更新使其不向后兼容。谢谢，解决了。