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

问题描述

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

Description.js

order_details(id)

coreAPi.js

在这里我称为Laravel API

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>[phone]</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响应进行字符串化。