Question

TypeError：无法读取未定义的 React.js 的属性“Item”

2021-01-06

367

javascript reactjs

我正在用 React.js 开发一个电子商务网站，在 Chrome 中出现了“TypeError：无法读取未定义的属性‘Item’”。这里还有错误和 VS Code 的屏幕截图，与发生错误的代码本身相同。请帮忙！我将不胜感激！:)

在这里您可以看到代码和错误

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

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

Answer 2

根据 react-router-bootstrap 文档：

It's an integration between React Router v4 and React Bootstrap by wrapping your React Bootstrap element in a <LinkContainer> .

因此，只需从 react-router-bootstrap 导入 <LinkContainer> ，对于另一个组件（如 List 和 Button ），请从 react-bootstrap 包中导入它们，然后根据其文档进行安装

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