如何在reactjs和laravel应用程序中查看特定项目的详细信息

Question

当我单击“查看详细信息”按钮时，我尝试在单个页面上显示我的pe列表详细信息，但遇到了一些问题，请提供帮助。

当我执行{JSON.stringify（pet）}时，它会给出正确的数据列表，但是当我尝试绑定时，它没有显示任何数据，但是我检查网络便给出了正确的数据

我的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 Description = (props) => {
const [pet, setPet] = useState({});
const [error, setError] = useState(false);

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

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

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>{pet && pet.pbrd_display_name}</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={"http://localhost:8000/storage/uploads/puppies/"+pet.pet_image_ids} alt={pet.pet_image_ids}/>
                                    </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.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>Gender : </strong> {pet && pet.loc_contact_numbers }</h4>
                            <h4><strong>DOB : </strong> {pet && pet.plttr_birthdate }</h4>
                            <h4><strong>Location : </strong> {pet && pet.loc_receipt_name} </h4>
                        </div>
                        <div className="call-section">
                            <div className="call-left">
                                <img src="img/phone.svg" />
                                <h4>Need a nuppy guidience? <span>{pet && pet.loc_contact_numbers }</span></h4>
                            </div>
                            <div className="call-right">
                                <Link to="#" className="boxed-btn3">{pet && pet.pstatus_name }</Link>
                            </div>
                        </div>
                        <div className="decription-parra">
                            <h4>Description :</h4>
                            <p>{pet && pet.description}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

        <Form/>

        <WhySafari />

        <Related />

    </div>
    );
   }
   export default Description;

请帮助。预先感谢

Answer 1

尝试这样的useEffect：

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

因此，如果（props.match.params.id）更改并且Ui也将更新，它将重新运行效果。挂钩上的React文档可能会有用：https://reactjs.org/docs/hooks-effect.html