英文:
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获取房屋IDuseEffect(() => {// 根据房屋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 URLuseEffect(() => {// Fetch house data from API based on house IDconst 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" valueuseEffect(() => {//rest of your effect here...};export default HouseInfo;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论