反应-类型错误:无法读取未定义的属性“图像" [英] React - TypeError: Cannot read property 'image' of undefined

查看：41
本文介绍了反应-类型错误:无法读取未定义的属性“图像"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

当我点击主页上的产品时，它显示错误:TypeError: Cannot read property 'image' of undefined - 在 return 部分，其中我把 {product.image} 放进去.

但是，当我取消注释它检查产品是否存在的部分(ProductPage.js)时，它仍然输出Item不存在！"，好像没有data.js"中有关产品的任何数据；文件.

App.js

ProductPage.js

从'react'导入React；从'../data'导入数据；导出默认函数 ProductPage(props) {const product = data.products.find((x) => x._id === props.match.params.id);//如果(！产品){//返回 
 项目不存在！
//}返回 (<div><div className="row"><div className="col"><img src={product.image} alt={product.name}></img>

);}

Data.js

const 数据 = {产品:[{_id: 1,名称:'iPhone 11 Pro',类别:智能手机"，图像:'/images/2.jpg',价格:949，评分:4.8，numReviews: 15,描述: 'testtesttesttesttesttesttest',},],};导出默认数据；

提前致谢.

解决方案

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

编辑:如果您打算使用 props.match.params.id 进行比较，请记住它是一个字符串

将您的 ProductPage 组件更改为:

从'react'导入React；从'../data'导入数据；从反应路由器"导入 {withRouter}；功能产品页面(道具){const product = data.products.find((x) => x._id === props.match.params.id);返回 (<div><div className="row"><div className="col"><img src={product.image} alt={product.name}></img>

);}导出默认 withRouter(ProductPage);

So I'm creating a e-commerce store for a sideproject, but I'm stuck on a problem. On the main page I have all the products, and I've created a route for the product details. When I click on one of them, it gets the id, and should output all the product details. I have the details about products in a JSON array "data.js".

When I click on a product in the main page, it displays the error: TypeError: Cannot read property 'image' of undefined - in the return part, where I put {product.image} in.

However, when I uncomment the part where it checks whether product exists or not (ProductPage.js), it still outputs "Item does not exist!", as if there weren't any data about the product in "data.js" file.

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

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;

Thanks in advance.

解决方案

You need to wrap your ProductPage component with withRouter to access props.match.params.id.

Edit: if you are going to use props.match.params.id for comparison, keep in mind that it is a string

Change your ProductPage component to:

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);

这篇关于反应-类型错误:无法读取未定义的属性“图像"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆