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

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

DDD

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

原创

710人浏览过

在 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 对象。

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

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

查看详情

{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 是一个数组，数组中的每个元素都是一个包含特定属性的对象。