在自定義反應掛鈎中使用 axios 獲取數據不會返回數據

Question

我使用此代碼來顯示產品的id 。

import { useState } from 'react';
import axios from 'axios';

const BASE_URL = "https://makeup-api.herokuapp.com/api/v1/products";

const useGetProduct = () => {
  const [products, setProducts] = useState([]);
  const [singleProduct, setSingleProduct] = useState(null);
    
  const getTopProducts = () => {
    axios.get(`${BASE_URL}.json`, {
      params: {
        product_tags: 'Canadian',
      },
    })
      .then(Response => setProducts(Response.data));
  };

  const getSingleProduct = () => {
    axios.get(`${BASE_URL}/1048.jason`)
      .then(Response => setSingleProduct(Response.data));
  };

  return {
    products,
    getTopProducts,
    singleProduct,
    getSingleProduct,
  }
};

export default useGetProduct;

import React, { useEffect } from "react";
import { useParams } from "react-router-dom";
import useGetProduct from "../hooks/useGetProduct";

const Product = () => {
  const { id } = useParams();
  const { singleProduct, getSingleProduct } = useGetProduct();

  useEffect(() => {
    getSingleProduct();
  }, []);
   
  return ( 
    <div>
      <p>Product: {id}</p>
    </div>
  );
};
 
export default Product;

應用程序.js

<Route exact path="/product/:id" element={<Product />} />

但是當我將<p>Product: {id}</p>更改為<p>Product: {singleProduct?.name}</p>時，產品名稱不會顯示。 相反，它只顯示Product:沒有關於本地主機上產品的詳細信息，我不確定為什么。

const Product = () => {
  const { id } = useParams();
  const { singleProduct, getSingleProduct } = useGetProduct();
    
  useEffect(() => {
    getSingleProduct();
  }, []);
   
  return ( 
    <div>
      <p>Product: {singleProduct?.name}</p>
    </div>
  );
};
 
export default Product;

我想通過 react js 中的鈎子顯示有關單個產品的詳細信息。

Answer 1

  const { id } = useParams();
  const { singleProduct, getSingleProduct } = useGetProduct();

  useEffect(() => {
      getSingleProduct();
  }, []);

您沒有使用useParams中的id 。 你不應該把它傳遞給getSingleProduct ，我假設singleProduct是未定義的。