TypeError：無法讀取未定義反應的屬性“圖像”

Question

這是我收到錯誤的地方，即 Product.js 這在我單擊的產品上找到了 ID，來自 data.js 這里我收到標題中的錯誤我無法理解為什么它沒有從 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)