React.js 闪烁问题

Question

I followed the online course to make a website and I realized that my website is blinking when I move to other pages. Are there any problems in my codes?

parent

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

child

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

I used useEffect and it was blinking, so I tried useLayoutEffect instead but still, it happens.. (I used Link tag tho)

Is it because I use async await to fetch api data?

Or I am using django rest_framework, is it a problem with low speed of django rest_framework??

thank you..!

Answer 1

I think its because of the async await request that your doing.
You should try and implement the loading feature in your app

something like this

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>

  ...
}