TypeError：无法读取未定义 React.js 的属性“项目”答案

【问题标题】：TypeError: Cannot read property 'Item' of undefined React.jsTypeError：无法读取未定义 React.js 的属性“项目”
【发布时间】：2021-04-12 06:14:58
【问题描述】：

我正在使用 React.js 开发电子商务网站，并且在 Chrome 中出现“TypeError: Cannot read property 'Item' of undefined”。这也是错误的屏幕截图和与发生错误的代码本身相同的 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？

标签： javascript reactjs

【解决方案1】：

改变

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 导入的

【讨论】：

【解决方案2】：

根据react-router-bootstrap文档：

通过将 React Bootstrap 元素包装在 <LinkContainer> 中，这是 React Router v4 和 React Bootstrap 之间的集成。

所以只需从react-router-bootstrap导入<LinkContainer>，对于像List和Button这样的另一个组件，从react-bootstrap包中导入它们，所以根据它的document安装它

我个人认为没有理由使用 react-router-bootstrap 包。

【讨论】：