![](/img/trans.png)
[英]TypeError: Cannot read property 'length' of undefined in react.js
[英]TypeError: Cannot read property 'Item' of undefined React.js
我正在 React.js 中开发一个电子商务网站,并且在 Chrome 中出现“TypeError:无法读取未定义的属性'Item'”。 这也是错误的屏幕截图和与发生错误的代码本身相同的 VS 代码。 请帮助:我将不胜感激! :)
在这里你可以看到代码和错误
import React from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Card, Button } from 'react-router-bootstrap'
import Rating from '../components/Rating'
import products from '../products'
const ProductScreen = ({ match }) => {
const product = products.find((p) => p._id === match.params.id)
return (
<>
<Link className='btn btn-light my-3' to='/'>
Go Back
</Link>
<Row>
<Col md={6}>
<Image src={product.image} alt={product.name} fluid />
</Col>
<Col md={3}>
<ListGroup variant='flush'>
<ListGroup.Item>
<h3>{product.name}</h3>
</ListGroup.Item>
<ListGroup.Item>
<Rating value={product.rating} text ={`${product.numReviews} reviews`} />
</ListGroup.Item>
</ListGroup>
</Col>
</Row>
</>
)
}
export default ProductScreen
根据react-router-bootstrap
文档:
通过将 React Bootstrap 元素包装在
<LinkContainer>
中,它是 React Router v4 和 React Bootstrap 之间的集成。
所以只需从react-router-bootstrap
导入<LinkContainer>
,对于像List
和Button
这样的另一个组件,从react-bootstrap
package 导入它们,所以根据它的文档安装它
我个人认为没有理由使用react-router-bootstrap
package。
改变
import { Row, Col, Image, ListGroup, Card, Button } from 'react-router-bootstrap'
至
import { Row, Col, Image, ListGroup, Card, Button } from 'react-bootstrap'
然后错误消失了。
使用react-router-bootstrap你可以改变:
<Link className='btn btn-light my-3' to='/'>
Go Back
</Link>
至
<LinkContainer to="/">
<Button>Go Back</Button>
</LinkContainer>
LinkContainer 是从 react-router-bootstrap 导入的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.