标签: react-loading-skeleton

我有一个组件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 …