在Next.js中如何使用map函数遍历JSON数据？

你提供的JSON结构参考：

基础规则 #

map 只能遍历数组类型的JSON值，若你拿到的JSON是对象格式，需要先通过Object.keys()、Object.values()或Object.entries()转换为数组后再遍历。

服务端组件遍历示例 #

Next.js 13+ App Router 下默认是服务端组件，可直接处理拿到的JSON数据：

// app/page.tsx
// 示例JSON数据，可替换为fetch、数据库查询拿到的JSON
const jsonData = {
  "products": [
    {"id": 1, "name": "商品1", "price": 99},
    {"id": 2, "name": "商品2", "price": 199}
  ]
}

export default function Home() {
  return (
    <div>
      <h1>商品列表</h1>
      {/* 遍历数组 */}
      {jsonData.products.map(item => (
        // 遍历项必须添加唯一key属性，优先使用数据内的唯一id，不要用索引index
        <div key={item.id}>
          <p>商品名：{item.name}</p>
          <p>价格：{item.price}</p>
        </div>
      ))}
    </div>
  )
}

客户端组件遍历示例 #

标注了'use client'的客户端组件遍历逻辑和React一致，仅数据获取适配客户端逻辑即可：

'use client'
import { useEffect, useState } from 'react'

export default function ClientPage() {
  const [productList, setProductList] = useState([])

  useEffect(() => {
    // 模拟请求JSON数据
    const getJsonData = async () => {
      const res = await fetch('/api/your-interface')
      const result = await res.json()
      setProductList(result.products)
    }
    getJsonData()
  }, [])

  return (
    <div>
      <h1>客户端渲染商品列表</h1>
      {productList.map(item => (
        <div key={item.id}>
          <p>{item.name}</p>
          <p>{item.price}</p>
        </div>
      ))}
    </div>
  )
}

常见问题处理 #

• 数据为空时报错处理：添加可选链或存在性判断，避免调用map undefined 报错

  // 可选链写法
  {jsonData?.products?.map(item => <div key={item.id}>{item.name}</div>)}
  
  // 存在性判断写法
  {jsonData.products && jsonData.products.map(item => <div key={item.id}>{item.name}</div>)}
  

• JSON为对象时的遍历方法：

  const jsonObj = {"id": 1, "name": "测试商品", "desc": "商品说明"}
  // 遍历对象所有值
  {Object.values(jsonObj).map((value, index) => (
    <p key={index}>{value}</p>
  )}
  

内容的提问来源于stack exchange，提问作者Amjad Niazi