React.js 閃爍問題

Question

我按照在線課程制作了一個網站，當我移動到其他頁面時，我意識到我的網站正在閃爍。 我的代碼有問題嗎？

父母

import "./Product.css";
import Product from "./Product";
import { useLayoutEffect, useState } from "react";
import axios from "axios";

export default function Body() {
  const [products, SetProducts] = useState([]);

  useLayoutEffect(() => {
    async function fetchProducts() {
      const { data } = await axios.get("http://127.0.0.1:8000/api/products/");
      SetProducts(data);
    }

    fetchProducts();
  }, []);

  return (
    <div className="product">
      {products.map((data) => (
        <div key={data.id} className="product_child">
          <Product product={data} />
        </div>
      ))}
    </div>
  );
}

孩子

import { Link } from "react-router-dom";

export default function Product({ product }) {
  return (
    <div className="product">
      <div className="prodcut_child">
        <Link
          style={{ color: "inherit", textDecoration: "none" }}
          to={`/product/${product.id}`}
        >
          <img src={product.img} alt="img" />
          <p>{product.title}</p>
          <h1 style={{ fontSize: "1.3rem" }}>${product.price}</h1>
        </Link>
      </div>
    </div>
  );
}

我使用useEffect並且它在閃爍，所以我嘗試useLayoutEffect但仍然發生了......（我使用了Link標簽）

是因為我使用async await來獲取 api 數據嗎？

或者我使用的是 django rest_framework，是不是 django rest_framework 速度低的問題？

謝謝你..！

Answer 1

我認為這是因為您所做的異步等待請求。
您應該嘗試在您的應用中實現加載功能

像這樣的東西

export default function Body() {
  const [products, SetProducts] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function fetchProducts() {
      setLoading(true);
      const { data } = await axios.get("http://127.0.0.1:8000/api/products/");
      SetProducts(data);
    }

    fetchProducts();
    setLoading(false);
  }, []);

  if (loading) return <div>loading...</div>

  ...
}