React调用PUBG API：如何访问嵌套对象数组中的id值？

你的代码核心问题是没正确解析PUBG API的响应结构——API返回的不是直接的玩家数组，而是一个包含data字段的顶层对象，所有玩家数据都存在data数组里。以下是具体修复步骤和完整代码：

修复要点 #

1. 修正响应数据存储
   原代码把整个响应对象存在items里，实际要取json.data这个玩家数组：

   .then(json => setItems(json.data))
   

2. 优化空值判断
   直接用items.length > 0判断即可，空数组的length为0，无需额外判断!==undefined。

3. 正确访问玩家ID
   每个item就是单个玩家对象，直接通过item.id就能拿到目标ID，逻辑本身没问题，只是之前没拿到正确的数组。

完整修复代码 #

import React, { useEffect, useState } from 'react'

function Player() {
  const [player, setPlayer] = useState('JohnnyUtah')
  const [items, setItems] = useState([])

  useEffect(() => {
    const apiKey = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiI5MTI0M2U5MC1iMjk5LTAxM2EtN2Q5ZC0xNzRhYzM1YTM1ZGYiLCJpc3MiOiJnYW1lbG9ja2VyIiwiaWF0IjoxNjUyMTkyMTI4LCJwdWIiOiJibHVlaG9sZSIsInRpdGxlIjoicHViZyIsImFwcCI6InB1YnJnLWxlYWRlcmJvIn0.veCjNiRtCzchj2Gli-aZt_0YQjtMvey3io-UUDa0zpQ";

    const options = {
      "headers": {
        "Accept": "application/vnd.api+json",
        "Authorization": `Bearer ${apiKey}`
      }
    }

    fetch(`https://api.pubg.com/shards/stadia/players?filter[playerNames]=${player}`, options)
      .then(response => response.json())
      .then(json => setItems(json.data))
      .catch(err => console.error('请求出错:', err)) // 新增错误捕获，方便调试
  }, [player])

  return (
    <>
      <div>
        <button onClick={() => setPlayer('JohnnyUtah')}>JohnnyUtah</button>
        <button onClick={() => setPlayer('Binder')}>Binder</button>
        <button onClick={() => setPlayer('MartinSheehanUK')}>MartinSheehanUK</button>
      </div>
      <h1>{player}</h1>

      {items.length > 0 ? (
        <ul>
          {items.map((item) => (
            <li key={item.id}>玩家ID: {item.id}</li>
          ))}
        </ul>
      ) : (
        <div>未找到结果</div>
      )}
    </>
  ) 
};

export default Player;

额外说明：新增了catch块捕获请求错误，方便排查网络或API密钥问题；同时用<ul>包裹列表项，符合HTML语义规范。

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