英文:
I am getting this error Cannot read properties of undefined (reading 'params')
问题
以下是您提供的内容的中文翻译：
当我尝试从数据库获取房屋详情时，我遇到了这个错误。
houseinfo.js
import React, { useState, useEffect } from 'react';
const HouseInfo = ({ match }) => {
const [listings, setListings] = useState(null);
const id = match.params.id; // 从URL获取房屋ID
useEffect(() => {
// 根据房屋ID从API获取房屋数据
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);
}
};
fetchListings();
}, [id]);
if (!listings) {
return <div>加载中...</div>;
}
return (
<div>
<h1>房屋信息</h1>
<ul>
<li>标题：{listings.title}</li>
<li>位置：{listings.location}</li>
<li>价格：{listings.price}</li>
</ul>
</div>
);
};
export default HouseInfo;
这是我的 app.js
<Route path="/houseinfo/:id" element={<HouseInfo />} />
我期望从数据库获取数据并在页面上列出它，但我遇到了这个错误。我对React相对新手，不知道错误是什么，我在跟随YouTube教程，但它现在无法正常工作。
英文:
I got this error when I am trying to get house details from database.
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;
This is my app.js
<Route path="/houseinfo/:id" element={<HouseInfo />} />
I am expecting to get the data from the database and list it in the page but I get that error. I am fairly new to react so I don't know what the error is, I was follwoing an youtube tutorial but it is now working
答案1
得分: 0
如果你使用React-router，你可以使用同一包中的useParams()钩子，它会返回一个包含你的URL参数的对象。
在你的代码中会像这样：
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router';
const HouseInfo = ({ match }) => {
const [listings, setListings] = useState(null);
const {id} = useParams(); // 解构返回的对象以只获取"id"值
useEffect(() => {
// 你的效果的其余部分
// ...
});
export default HouseInfo;
英文:
Assuming you use React-router you can use the hook useParams() from the same package, this will return an object containing your url parameters.
It would look like this in your code:
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router'
const HouseInfo = ({ match }) => {
const [listings, setListings] = useState(null);
const {id} = useParams(); // destructure the returned object to get only the "id" value
useEffect(() => {
//rest of your effect here
...
};
export default HouseInfo;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论