React中从嵌套JSON获取description、bannerUrl参数失败，求解决方案

你的代码取不到description、bannerUrl的核心原因是JSON结构嵌套层次没处理对：

• 导入的games是一个数组，数组里的每个元素是一个外层对象，而你要的游戏数据（包括description、bannerUrl）都在这个外层对象的"70010000000025"属性对应的子对象里。
• 你当前直接遍历数组元素（外层对象），尝试访问value.description，但外层对象本身没有这个属性，自然输出为空。

具体解决方式 #

情况1：外层对象的键是固定的（比如所有数组元素都用7001000000025作为键） #

直接通过键名定位到子对象：

import games from "../JSON/US.en.json";

{games.map((item, index) => {
  const gameData = item["70010000000025"];
  // 注意：如果JSON里键名带**（比如"**bannerUrl**"），访问时要对应写全
  return (
    <div key={index}>
      <p>{gameData.description}</p>
      <img src={gameData.bannerUrl} alt="游戏横幅" />
    </div>
  );
})}

情况2：外层对象的键是动态的（每个数组元素的键都不一样） #

用Object.values()取出子对象（因为每个外层对象只有一个游戏数据子对象）：

import games from "../JSON/US.en.json";

{games.map((item, index) => {
  // 取出外层对象里的第一个（也是唯一的）值，即游戏数据对象
  const gameData = Object.values(item)[0];
  return (
    <div key={index}>
      <p>{gameData.description}</p>
      <img src={gameData.bannerUrl} alt="游戏横幅" />
    </div>
  );
})}

额外注意点 #

检查你的JSON文件里的键名是否真的带有**（比如"**bannerUrl**"），如果是，访问时要写成gameData["**bannerUrl**"]，否则会取不到对应值。

内容的提问来源于stack exchange，提问作者Osman Remzi