产品 ID 未定义

Question

我正在尝试获取产品，它来自后端，但有时会显示产品 ID 未定义？不知道拿到产品和ID后显示如何

import { Layout } from "antd";
import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import axios from "axios";

const ProductDetails = () => {
  const [product, setProduct] = useState();
  const navigate = useNavigate();
  const params = useParams();
  //use effect
  useEffect(() => {
    if (params?.slug) getProduct();
    //eslint-disable-next-line
  }, [params?.slug]);
  //get product
  const getProduct = async () => {
    try {
      const { data } = await axios.get(
        `/api/pp/product/get-product/${params.slug}`
      );
      setProduct(data?.product);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <Layout>
      <div className="row">
        <div className="col-md-6">
          <img
            src={`/api/pp/product/productPhoto/${product._id}`}
            width={"300"}
            height={"250"}
          />
        </div>
        <div className="col-md-6">
          <h1>product details</h1>
        </div>
      </div>
    </Layout>
  );
};

export default ProductDetails;

我正在尝试根据所选 ID 获取产品详细信息。

已成功获取，但有时会显示错误 UNDEFINED ??

Answer 1

可能和刷新后初始渲染的处理方式有关

useEffect(() => {
    const getProduct = async () => {
      if (params?.slug) {
        try {
          const { data } = await axios.get(
            `/api/pp/product/get-product/${params.slug}`
          );
          setProduct(data?.product);
        } catch (error) {
          console.log(error);
        }
      }
    };

    getProduct();
  }, [params?.slug]);

尝试在每次渲染时获取产品详细信息。使用 async/await 可能会导致

undefined

错误。

---

始终仅在在

state

中获取并更新产品时才渲染产品。

{product && (
   <>
     <div className="col-md-6">
        <img
           src={`/api/pp/product/productPhoto/${product._id}`}
           width={"300"}
           height={"250"}
        />
     </div>
     <div className="col-md-6">
        <h1>product details</h1>
     </div>
   </>
)}