React组件中处理数据未定义错误：防御性编程与可选链

// 错误示例：
// this.data.image.data[0].attributes.url

// 正确示例：
// data.image.data[0].attributes.url

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

    // 在访问data的任何属性之前，先检查data是否存在
    if (!data) {
        // 数据未就绪，返回null或渲染一个加载/错误占位符
        return null; 
    }

    // ... 后续渲染逻辑
};

// 错误示例：如果data.image或data.image.data[0]为null/undefined，会报错
// data.image.data[0].attributes.url

// 正确示例：使用可选链，如果中间任何环节为null/undefined，则返回undefined
// data.image?.data[0]?.attributes?.url

// 如果data.image?.data[0]?.attributes?.url为undefined，则使用空字符串""
src={process.env.REACT_APP_DEV_URL + (data.image?.data[0]?.attributes?.url || "")}

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

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

    // 1. 在组件渲染前检查核心数据是否存在
    if (!data) {
        // 如果data不存在，不渲染组件，或渲染一个加载/错误提示
        return null; 
    }

    return (
        <div
            className="product-card"
            onClick={() => navigate("/product/" + id)}
        >
            <div className="thumbnail">
                <img
                    // 2. 使用可选链 ?. 安全访问深层嵌套属性
                    // 3. 使用 || 提供默认值（空字符串），防止src属性为undefined
                    src={
                        process.env.REACT_APP_DEV_URL +
                        (data.image?.data[0]?.attributes?.url || "")
                    }
                    // 4. 为图片添加alt属性，提升可访问性，并提供默认值
                    alt={data.title || "Product Image"} 
                />
            </div>
            <div className="prod-details">
                {/* 5. 确保直接使用data，而不是this.data */}
                <span className="name">{data.title || "未知产品"}</span> 
                <span className="price">&#8377;{data.price || "N/A"}</span>
            </div>
        </div>
    );
};

export default Product;