React - TypeError：无法读取未定义的属性“图像”

所以我正在为一个副项目创建一个电子商务商店，但我遇到了一个问题。 在主页上我有所有产品，并且我已经为产品详细信息创建了一条路线。当我点击其中之一时，它会获取 id，并应输出所有产品详细信息。我在 JSON 数组“data.js”中有有关产品的详细信息。

当我点击主页中的产品时，它显示错误：TypeError: Cannot read property 'image' of undefined- 在里面return部分，我放的地方{product.image} in.

但是，当我取消注释检查产品是否存在的部分（ProductPage.js）时，它仍然输出"Item does not exist!"，就好像“data.js”文件中没有任何有关产品的数据一样。

App.js

<Route path="/product/:id" component={ProductPage}></Route>

产品页面.js

import React from 'react';
import data from '../data';

export default function ProductPage(props) {
const product = data.products.find((x) => x._id === props.match.params.id);
// if (!product) {
//     return <div>Item does not exist!</div>
// }
return (
    <div>
        <div className="row">
            <div className="col">
                <img src={product.image} alt={product.name}></img>
            </div>
        </div>
    </div>
);
}

Data.js

const data = {
products:[
{
    _id: 1,
    name: 'iPhone 11 Pro',
    category: 'Smartphones',
    image: '/images/2.jpg',
    price: 949,
    rating: 4.8,
    numReviews: 15,
    description: 'testtesttesttesttesttesttesttest',
},
],
};
export default data;

提前致谢。

您需要将 ProductPage 组件包装为带路由器访问props.match.params.id.

Edit: 如果你要使用props.match.params.id为了进行比较，请记住它是一个字符串

将您的 ProductPage 组件更改为：

import React from 'react';
import data from '../data';
import {withRouter} from 'react-router';

function ProductPage(props) {
const product = data.products.find((x) => x._id === props.match.params.id);
return (
    <div>
        <div className="row">
            <div className="col">
                <img src={product.image} alt={product.name}></img>
            </div>
        </div>
    </div>
);
}

export default withRouter(ProductPage);