在 Next.js 中迭代嵌套 JSON API 的正确方法-js教程-PHP中文网

在 Next.js 中迭代嵌套 JSON API 的正确方法

DDD

发布： 2025-09-22 15:43:53

原创

720人浏览过

在 next.js 中迭代嵌套 json api 的正确方法

本文档旨在解决在 Next.js 项目中处理嵌套 JSON API 数据时遇到的常见问题。我们将通过一个实际示例，演示如何正确地访问和渲染嵌套字典中的数据，特别是在处理数组和对象嵌套的情况下。通过修改组件代码，确保能够准确提取并显示所需的数据，从而解决数据无法正确渲染的问题。

理解 JSON 结构

在开始之前，重要的是要彻底理解你正在处理的 JSON 数据的结构。仔细检查 JSON 响应，确定哪些字段是直接访问的，哪些字段嵌套在对象或数组中。这将帮助你确定在 Next.js 组件中如何正确地访问这些值。

在提供的示例中，JSON 结构如下：

component_name: 字符串，组件名称。
component_props: 对象，包含组件的属性。
- title: 字符串，标题。
- cards: 数组，包含卡片对象。
  - type: 字符串，卡片类型。
  - value: 对象，包含卡片的值。
    - image: 对象，包含图像信息。
      - id: 数字，图像ID。
      - title: 字符串，图像标题。
      - original: 对象，包含原始图像信息。
        
        src: 字符串，图像源。
        
        width: 数字，图像宽度。
        
        height: 数字，图像高度。
        
        alt: 字符串，图像描述。
    - card_title: 字符串，卡片标题。
    - card_hint: 字符串，卡片提示。
  - id: 字符串，卡片ID。

问题分析

原始代码在访问嵌套的 image 属性时存在问题。具体来说，代码尝试直接访问 card.value.image.src，但实际上 image 对象中包含一个 original 对象，其中才包含 src 属性。

解决方案

要解决这个问题，需要更新 CardsPage.js 组件中的代码，以正确访问嵌套的 original 对象。

以下是修改后的代码片段：

BRANDMARK

AI帮你设计Logo、图标、名片、模板……等

180

查看详情

{cards.map((card, key) => (
    <div key={key}>
        <p>{card.type}</p>
        <p>{card.value.card_title}</p> {/* 修改：使用 card_title 而不是 title */}
        <img src={card.value.image.original.src} alt={card.value.image.original.alt}/> {/* 修改：添加 original */}
    </div>
))}

登录后复制

修改说明：

card.value.card_title: 将 card.value.title 更改为 card.value.card_title，以匹配 JSON API 中的正确属性名称。
card.value.image.original.src: 在 image 和 src 之间添加了 original，以正确访问嵌套的图像源。
card.value.image.original.alt: 添加了 original，以正确访问嵌套的图像描述。
添加 key prop: 在 map 函数返回的 div 元素上添加了 key prop，这对于 React 渲染列表至关重要，避免出现性能问题。

完整代码示例

以下是完整的 CardsPage.js 组件的修改后的示例代码：

import React from 'react';
import PropTypes from 'prop-types';
import basePageWrap from '../components/BasePageWrap'; // 假设路径正确
import RawHtml from '../components/RawHtml'; // 假设路径正确
import s from './CardsPage.module.scss'; // 假设路径正确

const CardsPage = ({ title, comments, cards }) => {
    return (
        <div className={s['CardsPage']}>
            <p> title:{title} </p>
            <RawHtml html={comments} />

            <div>
                {cards.map((card, key) => (
                    <div key={key}>
                        <p>{card.type}</p>
                        <p>{card.value.card_title}</p>
                        <img src={card.value.image.original.src} alt={card.value.image.original.alt}/>
                    </div>
                ))}
            </div>

        </div>
    );
};

CardsPage.defaultProps = {
    title: '',
    comments: '',
    cards: [], // 修改：使用空数组作为默认值
};

CardsPage.propTypes = {
    title: PropTypes.string.isRequired,
    comments: PropTypes.string, // 修改：comments 可以是 undefined
    cards: PropTypes.arrayOf(PropTypes.shape({ // 添加 cards 的 PropTypes 定义
        type: PropTypes.string.isRequired,
        value: PropTypes.shape({
            image: PropTypes.shape({
                original: PropTypes.shape({
                    src: PropTypes.string.isRequired,
                    alt: PropTypes.string.isRequired,
                }).isRequired,
            }).isRequired,
            card_title: PropTypes.string.isRequired,
        }).isRequired,
    })).isRequired,
};

export default basePageWrap(CardsPage);

登录后复制

代码解释：

key prop: 在 cards.map 中添加了 key 属性，用于优化 React 的渲染性能。确保 key 是唯一的，例如可以使用 card.id 如果存在。
defaultProps: 将 cards 的默认值设置为空数组 []，避免初始渲染时出现错误。
propTypes: 添加了更详细的 propTypes 定义，用于验证传入组件的 props 类型，有助于在开发过程中发现潜在的错误。特别地，定义了 cards 是一个数组，数组中的每个元素都是一个包含特定属性的对象。