如何在Next.js中读取嵌套JSON并使用map函数展示数据？

你的代码无法正常工作，核心有两个问题：

1. translations是对象类型，而map是数组的专属方法，对象本身没有map方法，直接调用会报错。
2. 你的属性名包含连字符（比如_quote-translation），这种情况下不能用.运算符访问属性，必须用方括号[]语法。

解决方案 #

方式一：提取对象值转为数组（仅需遍历内容）

使用Object.values()方法提取translations对象的所有值，得到一个包含每个翻译项的数组，再用map遍历：

{Object.values(translations).map((translation, index) => {
  return (
    <div key={index}>
      <h2>翻译内容: {translation["_quote-translation"]}</h2>
      <h2>语言: {translation["_quote-translation-language"]}</h2>
      <hr />
    </div>
  );
})}

方式二：同时获取键和值（需用到条目标识如item-0）

如果需要用到每个条目的键（比如item-0），可以用Object.entries()方法，它会返回包含[键, 值]的数组：

{Object.entries(translations).map(([key, translation]) => {
  return (
    <div key={key}> {/* 用条目键作为key比index更稳定 */}
      <h3>条目: {key}</h3>
      <h2>翻译内容: {translation["_quote-translation"]}</h2>
      <h2>语言: {translation["_quote-translation-language"]}</h2>
      <hr />
    </div>
  );
})}

关键注意点 #

• map只能用于数组，对象要先转成数组才能遍历。
• 当属性名包含连字符、空格或其他特殊字符时，必须用对象["属性名"]的方式访问，不能用.语法。

内容的提问来源于stack exchange，提问作者Sahil Popli