Question

这是我遇到错误的地方，即Product.js 这将从data.js中找到我要单击的产品的ID 在这里我得到标题中的错误我不明白为什么它不能从data.js获取数据请问有人可以帮我吗？

import React from 'react';
import data from '../data';
import { Link } from 'react-router-dom';
    
function Product(props) {
    console.log(props.match.params.id);
    const product = data.bags.find(x => x._id === props.match.params.id);
    return <div>
        <div className="back-to-result">
            <Link to="/">Back to result</Link>
        </div>
        <div className="details">
            <div className="details-image">
                <img src={product.image} alt="product" /> // getting the error here
            </div>
            <div className="details-info">
                <ul>
                    <li>
                        <h4>{product.brand}</h4>
                    </li>
                    <li>
                        {product.name}
                    </li>
                    <li>
                        {product.ratings} Stars ({product.reviews} Reviews)
                    </li>
                    <li>
                        Price: <b>₹{product.price}</b>
                    </li>
                    <li>
                        Description:
                        <div>
                            {product.description}
                        </div>
                    </li>
                </ul>
            </div>
            <div className="details-action">
                <ul>
                    <li>
                        Price: ₹{product.price}
                    </li>
                    <li>
                        Status: {product.status}
                    </li>
                    <li>
                        Qty: <select>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </li>
                    <li>
                        <button className="button">Add to cart</button>
                    </li>
                </ul>
            </div>
        </div>

    </div>
}

export default Product;

从此处获取数据，即data.js 实际上这是我存储数据的redux存储

 export default {
            bags: [
                {
                    _id: '1',
                    category: 'watch',
                    name: "Bags",
                    brand: "Hublot",
                    price: 8000,
                    image: "/images/1.jpg",
                    ratings: 4.5,
                    reviews: 10
                },
                {
                    _id: '2',
                    category: 'bags',
                    name: "Watch",
                    brand: "Ulysse Nardin",
                    price: 10000,
                    image: "/images/2.jpg",
                    ratings: 3.5,
                    reviews: 12
                },
                {
                    _id: '3',
                    category: 'bags',
                    name: "Watch",
                    brand: "Tissot",
                    price: 4000,
                    image: "/images/3.jpg",
                    ratings: 5,
                    reviews: 24
                },
                {
                    _id: '4',
                    category: 'sunglasses',
                    name: "Watch",
                    brand: "Hublot",
                    price: 8000,
                    image: "/images/1.jpg",
                    ratings: 1.4,
                    reviews: 42
                },
                {
                    _id: '5',
                    category: 'bags',
                    name: "Watch",
                    brand: "Ulysse Nardin",
                    price: 10000,
                    image: "/images/2.jpg",
                    ratings: 3.7,
                    reviews: 14
                },
                {
                    _id: '6',
                    category: 'watch',
                    name: "Watch",
                    brand: "Tissot",
                    price: 4000,
                    image: "/images/3.jpg",
                    ratings: 4,
                    reviews: 17
                }
            ]
        }

Answer 1

像这样包装您的详细信息部分，以在尝试访问其属性之前验证是否已定义product。

{product &&

    (<div className="details">
        <div className="details-image">
            <img src={product.image} alt="product" /> // getting the error here
        </div>
        <div className="details-info">
            <ul>
                <li>
                    <h4>{product.brand}</h4>
                </li>
                <li>
                    {product.name}
                </li>
                <li>
                    {product.ratings} Stars ({product.reviews} Reviews)
                </li>
                <li>
                    Price: <b>₹{product.price}</b>
                </li>
                <li>
                    Description:
                    <div>
                        {product.description}
                    </div>
                </li>
            </ul>
        </div>
        <div className="details-action">
            <ul>
                <li>
                    Price: ₹{product.price}
                </li>
                <li>
                    Status: {product.status}
                </li>
                <li>
                    Qty: <select>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </li>
                <li>
                    <button className="button">Add to cart</button>
                </li>
            </ul>
        </div>
    </div>)
}

Answer 2

该行：

const product = data.bags.find(x => x.id === props.match.params.id);

可能导致product为undefined。

如果是这种情况，那么您将无法访问您期望的任何字段，从而导致错误。

在该行之后，放入if (!product) return <p>Product Not Found</p>，如果产品未定义或为空，它将返回较早，并且不会导致错误，但是找到产品后，它将继续运行并正常显示。

此外，您发现的是错误的字段名称。在您的数据片段中，项目具有_id字段，而不是id字段，您的查找应类似于：

data.bags.find(x => x._id === props.match.params.id)

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

2 个答案: