我正在构建一个React应用程序，其中我有一个父组件（PetDetailsPage），它使用axios从后端API中检索宠物的详细信息。pet的详细信息是使用react-router-dom中的useParams根据URL中的petID参数获取的。然后将检索到的数据作为prop（petDetails）传递给负责呈现宠物信息的子组件（PetDetails）。
我面临的问题是，当我使用有效的petID参数导航到PetDetailsPage时，数据成功地从后端获取，但子组件（PetDetails）显示一个空白页面。似乎petDetails prop 没有被正确接收或渲染。
我已经确认数据被正确提取，并且控制台中没有错误。但是，当数据可用时，PetDetails的内容不会显示。
我曾尝试在PetDetails组件中添加条件渲染来处理petDetails为null或undefined的情况，但似乎没有解决这个问题。
有人能帮我确定为什么PetDetails组件在数据可用时不显示宠物信息吗？我的实现中缺少了什么，我如何正确地呈现PetDetails组件与获取的宠物细节？
任何见解，建议，或代码示例，以故障排除和解决这个问题将不胜感激。谢谢你，谢谢
PetDetailsPage.js
import React, { useState, useEffect } from 'react';
import PetDetailsBread from '../components/petdetailscomponent/PetDetailsBread';
import PetDetails from '../components/petdetailscomponent/PetDetails';
import { useParams } from 'react-router-dom';
import axios from 'axios';
function PetDetailsPage() {
const { petID } = useParams();
const [petDetails, setPetDetails] = useState(null);
useEffect(() => {
// Function to fetch pet details from the backend API
const getPetById = async () => {
try {
const response = await axios.get(`http://localhost:5000/pets/${petID}`);
setPetDetails(response.data);
} catch (error) {
console.error('Error fetching pet details:', error);
}
};
getPetById();
}, [petID]);
return (
<main>
<PetDetailsBread petID={petID} />
<PetDetails petDetails={petDetails} />
</main>
);
}
export default PetDetailsPage;字符串
PetDetails.js
import React from 'react';
import { Link } from 'react-router-dom';
function PetDetails({ petDetails }) {
return (
<section className="pet-details-area">
<div className="container">
<div className="row">
<div className="col-lg-8">
<div className="pet-details-content">
<h4 className="title">{petDetails.tbl_petdetail.petName}</h4>
<div className="pet-details-img">
<img src={petDetails.tbl_petdetail.petImg} alt={petDetails.tbl_petdetail.petName} />
</div>
<h4 className="title">About Bio</h4>
<p>{petDetails.tbl_petdetail.petDesc}</p>
<div className="keynote-dog-info">
<h5 className="title">Dog Information</h5>
<div className="row">
<div className="col-md-3 col-sm-4 col-6">
<div className="keynote-info-item">
<h6>Gender:</h6>
<span>Male</span>
</div>
</div>
<div className="col-md-3 col-sm-4 col-6">
<div className="keynote-info-item">
<h6>Age:</h6>
<span>1 year</span>
</div>
</div>
<div className="col-md-3 col-sm-4 col-6">
<div className="keynote-info-item">
<h6>Color:</h6>
<span>White</span>
</div>
</div>
<div className="col-md-3 col-sm-4 col-6">
<div className="keynote-info-item">
<h6>Pet ID:</h6>
<span>09481</span>
</div>
</div>
<div className="col-md-3 col-sm-4 col-6">
<div className="keynote-info-item">
<h6>Size:</h6>
<span>Med. 26-60 lbs</span>
</div>
</div>
<div className="col-md-3 col-sm-4 col-6">
<div className="keynote-info-item">
<h6>Gender:</h6>
<span>Male</span>
</div>
</div>
<div className="col-md-3 col-sm-4 col-6">
<div className="keynote-info-item">
<h6>City:</h6>
<span>New York</span>
</div>
</div>
<div className="col-md-3 col-sm-4 col-6">
<div className="keynote-info-item">
<h6>Breed:</h6>
<span>Husky</span>
</div>
</div>
</div>
<Link to="/contacts" className="btn">Apply Today <img src="img/icon/w_pawprint.png" alt="" /></Link>
</div>
</div>
</div>
<div className="col-lg-4">
<aside className="keynote-sidebar">
<div className="widget keynote-widget">
<div className="keynote-widget-title mb-20">
<h5 className="title">Find Your Pets</h5>
</div>
<form className="sidebar-find-pets">
<div className="form-grp search-box">
<input type="text" placeholder="Search" />
<button><i className="fas fa-search" /></button>
</div>
<div className="form-grp">
<i className="flaticon-location" />
<input type="text" placeholder="Location" />
</div>
<div className="row">
<div className="col-6">
<div className="form-grp">
<i className="flaticon-color-palette" />
<input type="text" placeholder="White" />
</div>
</div>
<div className="col-6">
<div className="form-grp">
<i className="far fa-calendar-alt" />
<input type="text" defaultValue={2021} />
</div>
</div>
</div>
<div className="form-grp">
<i className="flaticon-sex" />
<select name="name" className="selected">
<option value>Female</option>
<option value>Male</option>
<option value>Adoption</option>
<option value>keynote</option>
</select>
</div>
<div className="form-grp">
<i className="fas fa-dollar-sign" />
<select name="name" className="selected">
<option value>Price</option>
<option value>$100 - $150</option>
<option value>$150 - $250</option>
<option value>$250 - $350</option>
<option value>$350 - $550</option>
<option value>$550 - $1000</option>
</select>
</div>
<div className="form-grp">
<i className="flaticon-plus-18-movie" />
<select name="name" className="selected">
<option value>Adult :</option>
<option value>6 Month</option>
<option value>9 Month</option>
<option value>1 Year</option>
</select>
</div>
<button className="btn">Find New Pets</button>
</form>
</div>
<div className="widget sidebar-newsletter">
<div className="sn-icon">
<img src="img/icon/sn_icon.png" alt="" />
</div>
<div className="sn-title">
<h4 className="title">Subscribe Newsletter</h4>
<p>Sign-up For Latest News</p>
</div>
<form className="sn-form">
<input type="text" placeholder="Enter Your Email" />
<button className="btn">subscribe</button>
</form>
</div>
</aside>
</div>
</div>
</div>
</section>
)
}
export default PetDetails;型
1条答案
按热度按时间ltskdhd11#
我通过添加一个加载来解决它
字符串