reactjs - 如何在 reactjs 和 laravel 应用程序中查看某个项目的详细信息
问题描述
当我单击查看详细信息按钮但遇到一些问题时,我尝试在我的单个页面上获取我的 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;
请帮忙。提前致谢
解决方案
Try useEffect like this:
useEffect(() =>{
const id = props.match.params.id;
loadsingelPet(id);
}, [props.match.params.id])
So it will re-run the effect if (props.match.params.id) changes and Ui will update too. React Documentation on hooks can be useful: https://reactjs.org/docs/hooks-effect.html
推荐阅读
- php - 是否有 RC4 的版本或修改会生成可安全用作 cookie 值的加密字符串
- java - 生产者 - 使用信号量的消费者实现
- hive - Hive UDF 仅适用于独立的 select 语句,而不适用于“将表创建为 select...”或“insert into .. select..”
- python - 如何将 KerasClassifier、Hyperopt 和 Sklearn 交叉验证放在一起
- javascript - 错误:ENOENT,当我使用 nodejs 下载 .jpg 时没有这样的文件或目录
- regex - Lua字符串模式检查字符是否不在单词中
- laravel-5 - 如何在导入所有现有表名时排除表名
- keras - 非常好的验证准确性,但预测不好
- reactjs - 如何从实时数据库 Firebase 中获取非字符串值的值
- python - 如何从外部脚本更新 haystack 的索引?