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>

  ...
}