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

【问题标题】：React - TypeError: Cannot read property 'image' of undefinedReact - TypeError：无法读取未定义的属性“图像”
【发布时间】：2021-02-19 23:10:03
【问题描述】：

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

当我在主页单击产品时，它会显示错误：TypeError: Cannot read property 'image' of undefined - 在return 部分，我将{product.image} 放入其中。

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

App.js

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

ProductPage.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>
);
}

数据.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;

提前致谢。

【问题讨论】：

标签： javascript html reactjs react-router

【解决方案1】：

您需要使用 withRouter 包装您的 ProductPage 组件以访问 props.match.params.id。

编辑：如果您要使用 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);

【讨论】：

仍然不起作用 - 尽管它确实访问了 props.match.params.id（使用 console.log 尝试），但显示相同的错误。
这个问题可能是由于字符串与数字的比较。 props.match.params.id 是一个字符串，其中您的 _id 在数据中是一个数字。试试 x._id.toString() === props.match.params.id 或 x._id === parseInt(props.match.params.id)

【解决方案2】：

从'react-router'导入{withRouter}；

这个方法不行，我试过了。

对我有用的解决方案：

而不仅仅是使用 product.image 使用 product && product.image。

有关条件渲染 (&&) 的更多信息，请查看以下链接：

What does '&&' operator indicate with { this.props.children && React.cloneElement(this.props.children, { foo:this.foo})

【讨论】：

嗨，欢迎来到 Stack Overflow。发布答案/问题时，请查看如何格式化您的答案，以便更容易阅读stackoverflow.com/help/formatting。感谢您在 SO 上发布答案！