我得到了这个错误,当我试图从数据库中获取房子的详细信息。
houseinfo.js
import React, { useState, useEffect } from 'react';
const HouseInfo = ({ match }) => {
const [listings, setListings] = useState(null);
const id = match.params.id; // Get house ID from URL
useEffect(() => {
// Fetch house data from API based on house ID
const fetchListings = async () => {
try {
const response = await fetch(`http://localhost:80/api/houseinfo/${id}`);
const data = await response.json();
setListings(data);
} catch (error) {
console.error('Error fetching house:', error);
}
};
fetchListings();
}, [id]);
if (!listings) {
return <div>Loading...</div>;
}
return (
<div>
<h1>House Information</h1>
<ul>
<li>Title: {listings.title}</li>
<li>Location: {listings.location}</li>
<li>Price: {listings.price}</li>
</ul>
</div>
);
};
export default HouseInfo;
这是我的app.js<Route path="/houseinfo/:id" element={<HouseInfo />} />
我希望从数据库中获取数据并将其列在页面中,但我得到了该错误。我是相当新的React,所以我不知道是什么错误,我正在跟随youtube教程,但它现在正在工作
1条答案
按热度按时间0yg35tkg1#
假设你使用
React-router
,你可以使用来自同一个包的钩子useParams()
,这将返回一个包含你的url参数的对象。在你的代码中看起来像这样: