Next.js 中处理复杂嵌套 JSON API 数据的策略与实践

{
    "component_name": "CardsPage",
    "component_props": {
        "title": "Sea creatures",
        "cards": [
            {
                "type": "card",
                "value": {
                    "image": {
                        "id": 1,
                        "title": "whale",
                        "original": {
                            "src": "/wt/media/images/whale.original.jpg",
                            "width": 512,
                            "height": 512,
                            "alt": "whale"
                        }
                    },
                    "card_title": "Whale",
                    "card_hint": "biggest"
                },
                "id": "c83003cf-4ee6-473f-a6b5-5a021bfc2fbd"
            }
            // ... 更多卡片项
        ]
    }
}

// 初始的错误代码示例
const CardsPage = ({ title, comments, cards }) => {
    return (
        <div className={s['CardsPage']}>
            <p> title:{title} </p>
            {/* ...其他内容... */}
            <div>
                {cards.map((card, key) => (
                    <div key={key}>
                        <p>{card.type}</p>
                        {/* 错误1：尝试直接访问 value.title，而 JSON 中是 value.image.title 或 value.card_title */}
                        <p>{card.value.title}</p> 
                        {/* 错误2：遗漏了 image 对象内部的 original 对象 */}
                        <img src={card.value.image.src} alt="BigCo Inc. logo"/>
                    </div>
                ))}
            </div>
        </div>
    );
};

import React from 'react';
import PropTypes from 'prop-types';
import RawHtml from './RawHtml'; // 假设存在此组件用于渲染HTML
import s from './CardsPage.module.scss'; // 假设存在样式模块
import basePageWrap from './basePageWrap'; // 假设存在高阶组件

const CardsPage = ({ title, comments, cards }) => {
    return (
        <div className={s['CardsPage']}>
            <p>标题: {title}</p>
            {/* 渲染评论，假设 RawHtml 组件能处理HTML字符串 */}
            <RawHtml html={comments} />

            <div>
                {/* 遍历 cards 数组，渲染每张卡片 */}
                {Array.isArray(cards) && cards.map((card, key) => (
                    <div key={card.id || key} className={s['cardItem']}> {/* 使用 card.id 作为 key 更稳定 */}
                        {/* 正确访问卡片类型 */}
                        <p>类型: {card.type}</p>
                        {/* 正确访问图片标题 (假设我们想显示图片的标题) */}
                        <p>图片标题: {card.value.image.title}</p>
                        {/* 正确访问图片源，包括 'original' 层级 */}
                        <img src={card.value.image.original.src} alt={card.value.image.original.alt || "Card image"} />
                        {/* 如果想显示卡片本身的标题，应使用 card.value.card_title */}
                        {/* <p>卡片标题: {card.value.card_title}</p> */}
                    </div>
                ))}
            </div>
        </div>
    );
};

// 为组件属性设置默认值，提高健壮性
CardsPage.defaultProps = {
    title: '',
    comments: '',
    cards: [], // cards 应该默认为空数组，而不是空字符串
};

// 属性类型校验，确保传入数据的类型符合预期
CardsPage.propTypes = {
    title: PropTypes.string.isRequired,
    comments: PropTypes.string, // comments 可能是可选的
    cards: PropTypes.arrayOf(
        PropTypes.shape({
            type: PropTypes.string.isRequired,
            value: PropTypes.shape({
                image: PropTypes.shape({
                    id: PropTypes.number,
                    title: PropTypes.string,
                    original: PropTypes.shape({
                        src: PropTypes.string.isRequired,
                        width: PropTypes.number,
                        height: PropTypes.number,
                        alt: PropTypes.string,
                    }),
                }),
                card_title: PropTypes.string,
                card_hint: PropTypes.string,
            }).isRequired,
            id: PropTypes.string.isRequired,
        })
    ).isRequired,
};

export default basePageWrap(CardsPage);

// 示例：使用可选链访问可能不存在的属性
<p>图片标题: {card.value?.image?.title}</p>
<img src={card.value?.image?.original?.src} alt={card.value?.image?.original?.alt || "Card image"} />