Fetch请求db.json返回单个对象而非对象数组，如何获取displayIcon字段

首先你遇到的是json-server返回数据不符合预期的问题，按以下步骤排查即可获取到displayIcon字段：

1. 修正db.json语法
   你给出的db.json片段存在两处语法错误，会导致json-server解析异常返回非预期内容：

• 缺少外层大括号，合法的JSON必须以对象作为顶层结构
• 每个武器对象的最后一个属性末尾多余逗号，不符合JSON语法规范
  修正后的完整db.json如下：

{
  "data": [
    {
      "uuid": "1",
      "displayName": "Odin",
      "category": "EEquippableCategory::Heavy",
      "defaultSkinUuid": "f454efd1-49cb-372f-7096-d394df615308",
      "displayIcon": "https://media.valorant-api.com/weapons/63e6c2b6-4a8e-869c-3d4c-e38355226584/displayicon.png",
      "killStreamIcon": "https://media.valorant-api.com/weapons/63e6c2b6-4a8e-869c-3d4c-e38355226584/killstreamicon.png",
      "assetPath": "ShooterGame/Content/Equippables/Guns/HvyMachineGuns/HMG/HMGPrimaryAsset"
    },
    {
      "uuid": "2",
      "displayName": "Ares",
      "category": "EEquippableCategory::Heavy",
      "defaultSkinUuid": "5305d9c4-4f46-fbf4-9e9a-dea772c263b5",
      "displayIcon": "https://media.valorant-api.com/weapons/55d8a0f4-4274-ca67-fe2c-06ab45efdf58/displayicon.png",
      "killStreamIcon": "https://media.valorant-api.com/weapons/55d8a0f4-4274-ca67-fe2c-06ab45efdf58/killstreamicon.png",
      "assetPath": "ShooterGame/Content/Equippables/Guns/HvyMachineGuns/LMG/LMGPrimaryAsset"
    }
  ]
}

2. 确认json-server启动配置
   使用以下命令启动json-server，确保端口和文件路径正确：
   json-server --watch db.json --port 3001
   启动后直接在浏览器访问http://localhost:3001/data，确认返回内容为武器数组即可。
3. 优化React请求逻辑
   增加错误处理和数据校验，避免渲染时报错，优化后代码如下：

// 初始值设为空数组，更符合数组类型的预期
const [weapons, setWeapons] = useState([]);

useEffect(() => {
  fetch('http://localhost:3001/data', {
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  })
    .then((res) => {
      if (!res.ok) throw new Error('接口响应异常')
      return res.json()
    })
    .then((data) => {
      // 兼容两种返回格式
      if (Array.isArray(data)) {
        setWeapons(data)
      } else {
        setWeapons(data.data || [])
      }
    })
    .catch(err => console.error('请求失败：', err))
}, []);

// 渲染时使用可选链获取displayIcon，避免空值报错
// 示例：遍历 weapons 数组，每个元素的displayIcon取法为 item?.displayIcon

完成以上步骤后即可正常获取displayIcon字段用于图标渲染。

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