React中遍历游戏平台数组实现平台展示求助

1. 明确API返回的JSON结构 #

先确认你拿到的游戏数据里platforms数组的结构，示例如下：

{
  "games": [
    {
      "id": 1,
      "title": "赛博朋克2077",
      "platforms": [
        {"name": "PlayStation 5"},
        {"name": "Xbox Series X/S"},
        {"name": "PC"}
      ]
    }
  ]
}

2. 嵌套使用map遍历渲染平台 #

在React组件中，你可以通过嵌套map方法实现：外层map遍历游戏列表，内层map遍历单个游戏的platforms数组，渲染每个平台的名称。

修改后的完整组件代码：

import { useEffect, useState } from 'react';

function GameList() {
  const [games, setGames] = useState([]);

  useEffect(() => {
    // 替换成你的API请求地址
    fetch('你的游戏数据API地址')
      .then(res => res.json())
      .then(data => setGames(data.games));
  }, []);

  return (
    <div className="game-list">
      {games.map(game => (
        <div key={game.id} className="game-card">
          <h3>{game.title}</h3>
          <div className="platform-section">
            <span>支持平台：</span>
            {/* 内层map遍历platforms数组 */}
            {game.platforms.map((platform, idx) => (
              {/* 优先用platform的唯一id做key，没有则用index */}
              <span key={idx} className="platform-tag">
                {platform.name}
              </span>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

export default GameList;

3. 补充优化点 #

• 空数组处理：如果某个游戏没有平台数据，可添加兜底提示：

  {game.platforms.length > 0 ? (
    game.platforms.map((platform, idx) => (
      <span key={idx} className="platform-tag">{platform.name}</span>
    ))
  ) : (
    <span className="no-platform">暂无平台信息</span>
  )}
  

• 样式美化：给平台标签加基础样式提升可读性：

  .platform-tag {
    background: #f0f0f0;
    border-radius: 4px;
    padding: 3px 8px;
    margin: 0 5px 5px 0;
    font-size: 0.9em;
  }
  

• Key值优化：如果API返回的platform对象有唯一id字段（比如platform.id），请用这个值替代idx作为key，避免列表渲染异常。

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