react-类型错误：无法读取未定义的属性“图像”

IT技术 javascript html reactjs react-router
2021-05-13 02:44:25

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

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

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

应用程序.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>
);
}

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

提前致谢。

2个回答

您需要使用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);

从“react-router”导入 {withRouter}；

这个方法不行我试过了。

对我有用的解决方案：

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

<img src={product && product.image} alt={product.name}>

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

'&&' 运算符用 { this.props.children && React.cloneElement(this.props.children, { foo:this.foo}) 表示什么

其它你可能感兴趣的问题
上一篇较低的 BuildTak 附着力 下一篇从安全角度来看，为什么要从 24 V 中选择 12 V？