如何在Reactjs和Laravel应用程序中按id获取选定的产品详细信息

我需要的是显示所选产品的详细信息，我正在使用React和Laravel：选择一个产品后，在我的ProductDetails页面中应该显示所选产品的详细信息。但是当我执行{JSON.stringify（pet）}时，我会以only-son格式获得详细信息。当我将它与我的元素绑定时，它不提供任何数据。请帮帮我

Description.js

import React, {useState, useEffect} from "react";
import {Link} from 'react-router-dom';
import Form from "./Form";
import Related from "./Related";
import WhySafari from "./WhySafari";
import {read} from "./apiCore";


const Pet = (props) =>{
const [pet, setPet] = useState({});
const [error, setError] = useState(false)

const loadSinglePet = id =>{
    read(id).then(data =>{
        if(data.error){
            setError(data.error);
        }else{
            setPet(data);
            console.log(data);
        }
    });
 };

useEffect(() => {
    const id = props.match.params.id;
    loadSinglePet(id);
}, [props]);

return(
    <div>
        <div className="bradcam_area breadcam_bg">
        <div className="container">
            <div className="row">
                <div className="col-lg-12">
                    <div className="bradcam_text text-center">
                        <h3>German Shepherd</h3>
                        <ul>
                            <li><Link to="/">Home</Link> <i className="ti-angle-right"></i> </li>
                            <li><Link to="/list">Puppies for sale</Link> <i className="ti-angle-right"></i> </li>
                            <li><Link to="#">Golden Doodle</Link><i className="ti-angle-right"></i></li>
                            <li><Link to="#">German Shepherd</Link></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section className="sample-text-area">
        <div className="container">
            <div className="row">
                {/* {JSON.stringify(pet)} */}
                <div className="col-lg-6">
                    <div className="gallery-container">
                        <div className="swiper-container gallery-main">
                            <div className="swiper-wrapper">
                                <div className="swiper-slide">
                                    <Link to="img/puppy/1.png" data-fancybox="group1">
                                        <img src="img/puppy/1.png" alt="Slide 01" />
                                    </Link>
                                </div>

                            </div>

                        </div>
                        <div className="left-thumb">
                            <div className="swiper-container gallery-thumbs">
                                <div className="swiper-wrapper">
                                    <div className="swiper-slide">
                                        <img src="img/puppy/1.png" alt="Slide 01" />
                                    </div>
                                    <div className="swiper-slide">
                                        <img src="img/puppy/1.png" alt="Slide 01" />
                                    </div>
                                    <div className="swiper-slide">
                                        <img src="img/puppy/1.png" alt="Slide 01" />
                                    </div>
                                </div>

                            </div>

                            <div className="swiper-button-prev"></div>
                            <div className="swiper-button-next"></div>
                        </div>
                    </div>
                </div>
                <div className="col-lg-6">
                    <div className="product-details">
                        <h1>{pet && pet.pbrd_display_name}</h1>
                        <ul className="dtails-price">
                            <li className="real-price">$3449</li>
                            <li className="old-price">$4469</li>
                        </ul>
                        <div className="product-specification">
                            <h4><strong>Puppy Id : </strong> #656171</h4>
                            <h4><strong>Color : </strong> Apricot</h4>
                            <h4><strong>DOB : </strong> August 19,2020</h4>
                            <h4><strong>Location : </strong> Stamford </h4>
                        </div>
                        <div className="call-section">
                            <div className="call-left">
                                <img src="img/phone.svg" />
                                <h4>Need a nuppy guidience? <span>(888)012 3456</span></h4>
                            </div>
                            <div className="call-right">
                                <Link to="#" className="boxed-btn3">Financing Available</Link>
                            </div>
                        </div>
                        <div className="decription-parra">
                            <h4>Description :</h4>
                            <p>The Cavachone is a designer breed of Cavalier King Charles Spaniel and Bichon Frise. The
                                appearance can vary greatly between dogs in a litter. Some dogs may have more Bichon
                                Frise appearance compared to other dogs in the litter that may have more of a Cavalier
                                King Charles Spaniel appearance. The Cavachone is an intelligent dog which is easy and
                                willing to learn. It is recommended that you begin socialization and training early in
                                the puppy's life. The puppy will get bored with training. You must vary the length of
                                the training sessions as well as variety in how the training is given.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

        <Form/>

        <WhySafari />

        <Related />

    </div>
    );
    };

    export default Pet;

请帮我解决这个问题

提前谢谢

---

您不需要将JSON响应字符串化

export const read = (id) =>{
return fetch(`${API}/puppies/${id}`, {
    method: "GET",
})
.then(response =>{
    return response.json();      
})
.catch(err =>{
    console.log(err);
});
};