javascript - 我找不到错误 TypeError: Cannot read properties of undefined (reading 'name')
问题描述
我是反应新手,当我试图从我的反应应用程序的一个名为“products.js”的文件中的一组对象中带来一些“产品”时,我需要一些帮助。
问题是我能够在主屏幕的数组中绘制产品。但是,当我尝试在我的详细信息产品页面上绘制这些产品时(这个页面是我可以看到单个产品详细信息的页面)“ProductDetails.js”我收到错误(无论我是否尝试使用 product.name 或product.price 或其他):
TypeError:无法读取未定义的属性(读取“名称”)
为了让您了解我在说什么,我将与您分享我的代码中的一些片段,以便您了解上下文。我将从确切的错误消息开始,我将以概览我的项目依赖项结束。
错误信息
TypeError: Cannot read properties of undefined (reading 'name')
ProductDetails
C:/Users/jjimennz/OneDrive/Desktop/eCommerce MERN Stack/Sprint1/frontend/src/views/ProductDetails.js:19
16 | const ProductDetails = ({ match }) => {
17 | const product = products.find((p) => p._id === match.params.id);
18 |
> 19 | return <div>{product.name}</div>;
20 | };
21 |
22 | export default ProductDetails;
这是我遇到麻烦的视图,不仅是“product.name”,我还遇到了任何“product.price”“product.image”......这是详细的产品屏幕,应该是视图在自己的页面上向我展示每个单独的产品及其详细信息,我称之为“ProductDetails.js”
import React from "react";
import products from "../products";
const ProductDetails = ({ match }) => {
const product = products.find((p) => p._id === match.params.id);
return <div>{product.name}</div>;
};
export default ProductDetails;
这是包含我要在上述产品详细信息屏幕上绘制的产品的数组的文件。这个文件是一个名为“products.js”的文件:
const products = [
{
_id: 1,
name: "Nemeziz 19.4",
image:
"https://assets.adidas.com/images/w_600,f_auto,q_auto/75987ad2e31644d59d24ab3000fce766_9366/Botines_Nemeziz_19.4_Pasto_Sintetico_Verde_FV3317_41_detail.jpg",
description: "Breve descripcion de los zapatos",
brand: "Adidas",
category: "Zapatos",
price: 89.99,
countInStock: 20,
rating: 4.5,
numReviews: 14,
},
{
_id: 2,
name: "Adidas Ace",
image: "https://www.sports-ws.com/img/item/F163AD0/F163AD0654.jpg",
description: "Breve descripcion de los zapatos",
brand: "Adidas",
category: "Zapatos",
price: 149.99,
countInStock: 8,
rating: 4.5,
numReviews: 15,
},
];
export default products
这是主屏幕的视图,我在其中显示了上述数组中的所有产品,这个效果很好,并且在屏幕上绘制了数组中的每个产品。这个叫做“HomeScreen.js”
import React from "react";
import { Row, Col } from "react-bootstrap";
import Product from "../components/Product";
import products from "../products";
const HomeScreen = () => {
return (
<>
<h1>Latest Products</h1>
<Row>
{products.map((product) => (
<Col key={product._id} sm={12} md={6} lg={4} xl={3}>
<Product product={product} />
</Col>
))}
</Row>
</>
);
};
export default HomeScreen;
这是 Product 组件,它基本上在上面的主屏幕视图的数组中绘制每个单独的产品。这个作为上面的主屏幕也很好用,它给我带来了带有名称、价格和图像的产品。我确实称这个组件为“Product.js” *
import React from "react";
import { Link } from "react-router-dom";
import { Card } from "react-bootstrap";
import Rating from "./Rating";
const Product = ({ product }) => {
return (
<Card className="my-3 p-3 rounded">
<Link to={`/product/${product._id}`}>
<Card.Img src={product.image} variant="top" />
</Link>
<Card.Body>
<Link to={`/product/${product._id}`}>
<Card.Title as="div">
<strong>{product.name}</strong>
</Card.Title>
</Link>
<Card.Text as="div">
<Rating
value={product.rating}
text={`${product.numReviews} reviews`}
/>
</Card.Text>
<Card.Text as="h3">${product.price}</Card.Text>
</Card.Body>
</Card>
);
};
export default Product;
“App.js”文件,这样您就可以更好地了解我的项目正在发生的事情
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./views/HomeScreen";
import ProductDetails from "./views/ProductDetails";
function App() {
return (
<Router>
<Header />
<main className="py-3">
<Container>
<Route path="/" component={HomeScreen} exact />
<Route path="/product/:id" component={ProductDetails} />
</Container>
</main>
<Footer />
</Router>
);
}
export default App;
这是我的项目中包含依赖项的“package.json”文件,以防万一它有助于帮助我
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0",
"react-dom": "^17.0.2",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
解决方案
Try this: Make changes in below two files only.
For ProductDetails.js
import React from "react";
import products from "../products";
import { useParams } from 'react-router-dom'
const ProductDetails = () => {
const {id} = useParams()
const product = products.find(p=>p._id === id)
return <div>{product.name}</div>;
}
export default ProductDetails;
对于 App.js
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./views/HomeScreen";
import ProductDetails from "./views/ProductDetails";
function App() {
return (
<Router>
<Header/>
<main className='py-3'>
<Container>
<Routes>
<Route path ='/' element={<HomeScreen/>} exact />
<Route path ='/product/:id' element={<ProductDetails/>}/>
</Routes>
</Container>
</main>
<Footer/>
</Router>
);
}
export default App;
推荐阅读
- javascript - 在反应中映射json数据时遇到问题
- php - 类似 pinterest 的“选择你最喜欢的主题”(服务器端)
- networking - 在 Linux 启动期间我无法删除默认路由
- sql - postgres 中的日期
- php - 在一堆 5 中创建数组
- android - 主线程无法加载所有 RecyclerView 项目。最好的方法是什么?
- python - 如何递归地将 HTML 映射到 Python 字典?
- python - 如何提高 find_elements_by_xpath 的速度
- api - Tomcat API:当客户端在每次请求后关闭连接时如何提高性能?
- r - 如何制作列值是变量的频率表?