React组件访问产品数据时出现未捕获运行时错误求助

核心错误：函数组件中误用this #

你写的是React函数组件，函数组件里不存在this上下文，所以this.data是完全错误的写法，直接使用props传入的data即可。

修复后的代码 #

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

const Product = ({ data, id }) => {
    const navigate = useNavigate();
    // 空值安全处理，避免数据未加载/异常时触发报错
    const imageUrl = data?.image?.data?.[0]?.attributes?.url 
        ? `${process.env.REACT_APP_DEV_URL}${data.image.data[0].attributes.url}`
        : ''; // 可替换为你的默认占位图地址

    return (
        <div
            className="product-card"
            onClick={() => navigate("/product/" + id)}
        >
            <div className="thumbnail">
                <img src={imageUrl} alt={data?.title || '产品图片'} />
            </div>
            <div className="prod-details">
                <span className="name">{data?.title || '未命名产品'}</span>
                <span className="price">&#8377;{data?.price || 0}</span>
            </div>
        </div>
    );
};

export default Product;

额外优化说明 #

1. 空值防护：用可选链操作符?.避免数据未加载完成或接口返回格式异常时，访问undefined属性引发的运行时错误。
2. 默认值兜底：为图片、标题、价格设置默认内容，保证页面不会因数据缺失直接崩溃。

内容的提问来源于stack exchange，提问作者juke box