我在嘗試訪問我的產品的數據時遇到這個未捕獲的運行時錯誤，請在此處輸入圖像描述

import React from "react";
import { useNavigate } from "react-router-dom";
import "./Product.scss";

const Product = ({ data, id }) => {
    const navigate = useNavigate();
    return (
        <div
            className="product-card"
            onClick={() => navigate("/product/" + id)}
        >
            <div className="thumbnail">
                <img
                    src={
                        process.env.REACT_APP_DEV_URL +
                        this.data.image.data[0].attributes.url
                    }
                />
            </div>
            <div className="prod-details">
                <span className="name">{data.title}</span>
                <span className="price">&#8377;{data.price}</span>
            </div>
        </div>
    );
};

export default Product;

獲取上述數據時顯示錯誤

這是我啟動npm后顯示的錯誤

我試著換成這個。data還是不行。

試試這個。在這種情況下，你不用“this”為了它。如果你可以復制/粘貼你的錯誤，這將是有幫助的，因為我不會鏈接到這個網站。我也會檢查進來的數據。這是一個例子:

import React from "react";
import { useNavigate } from "react-router-dom";
import "./Product.scss";

const Product = ({ data, id }) => {
    const navigate = useNavigate();

    if (!data) {
        // Handle case when data is missing or undefined
        return null; // or render a placeholder/error message
    }

    return (
        <div className="product-card" onClick={() => navigate("/product/" + id)}>
            <div className="thumbnail">
                <img
                    src={
                        process.env.REACT_APP_DEV_URL +
                        (data.image?.data[0]?.attributes?.url || "")
                    }
                    alt={data.title || "Product Image"}
                />
            </div>
            <div className="prod-details">
                <span className="name">{data.title}</span>
                <span className="price">&#8377;{data.price}</span>
            </div>
        </div>
    );
};

export default Product;