骨骼未显示

Question

ShopPage.jsx

在这里我在哪里获取所有优惠券和商店，以及我配置的位置是加载状态。

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>
  );
}

问题是骨骼根本没有显示，我不知道我是否以正确的方式将状态添加到优惠券。

看，就像您使用的是2个不同的提取呼叫/承诺的同一isloading状态。因此，如果FetchShop（）首先运行并首先解决，则当fetchCoupons（）运行时，iSloading已经设置为false。 如果您对每个承诺有2个不同的布尔值，例如ISShoploading和IsCouponsing，它可能会解决该问题。

https：//youtu.be/hafu6sb2e3c？si =6JCHWFNecBovyRni

您可以参考此YouTube视频，该视频提供了有关如何在React Vite应用中使用TailwindCSs.

Answer 1