骨架没有显示

Question

我试图显示骨骼，如果组件正在加载，我安装了react-loading-skeleton，它在其他组件中工作，但它在这个组件中显示，我希望它显示到组件完成加载。

ShopPage.jsx在这里获取所有优惠券和商店，并配置isLoading状态。

import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'
import Coupon from "../../components/coupon/Coupon";

export default function ShopPage() {
  const [disable, setDisable] = useState(false);
  const [shop, setShop] = useState("");
  const shopName = useParams().shopName;
  const [shopCoupons, setCoupons] = useState([]);
  const { search } = useLocation();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchShop = async () => {
      const res = await axios.get(`/shops/${shopName}`);
      setShop(res.data);
      console.log(res.data);
      setIsLoading(false);
    };
    const fetchShopCoupons = async () => {
      const response = await axios.get(`/coupons/${shopName}`);
      setCoupons(response.data);
      console.log("Shop Coupons are:", response.data);
      setIsLoading(false);
    };
    fetchShop();
    fetchShopCoupons();
  }, [shopName]);

  return (
    <>
        <div className="ShopPage">
          <div className="ShopPageContainer">
          
            <div className="ShopPageInfoContainer">
              <div className="ShopPageShopNameButton">
                <div>
                  <h5 className="ShopPageShopName">
                      {/* {capitalizeFirstLetter(`${shop.shopName} `) || <Skeleton />} */}
                  </h5>
                </div>
                               

            </div>

        </div>

        <Box className="ShopPageCouponsContainer">
        {shopCoupons.map(c => (
            <Coupon isLoading={isLoading} coupon={c} key={c}/>
        ))}
        </Box>
        </div>
        </div>  
    </>
  )
}

Coupon.jsx在这里，优惠券和骨架的标题和图像应该显示在这里，直到标题和其他组件完成加载

import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'

export default function Coupon({ coupon, isLoading }) {
  return (
    <div className="coupon-container">
    <div className="coupon">
          <div className="co-img">
            {coupon.photo && 
            <img className="couponLogo"
            src={coupon.shopPic} alt="" />}
          </div>
        <div className="content">
          <a href={`/shops/${coupon.shopName}`} target="_self">
            <h2 className="couponShopName">
{isLoading ? (<Skeleton />):(coupon.shopName)}
</h2>
          </a>
          <h1>{isLoading ? (<Skeleton />) : (coupon.title)}</h1>
        </div>
        <div className="couponDesc">
          {coupon.desc}
        </div>


    </div>
    </div>
  );
}

问题是骨架根本没有显示出来，我不知道我是否以正确的方式将isLoading状态传递给了Coupon.jsx，希望能提供一些帮助。

Answer 1

看起来，对于两个不同的获取调用/承诺，您使用的是相同的isLoading状态。因此，如果fetchShop()首先运行并先得到解析，则在运行fetchCoupons()时，isLoading已经设置为false。如果每个承诺都有两个不同的布尔值，比如isShopLoading和isCouponsLoading，它可能会解决这个问题。