React中如何映射两个不同API返回的数组，将数据合并展示在同一个表格中？

我来帮你搞定这个问题！你现在的代码是把两个API返回的数组分开渲染，导致出现了两个独立的表格区块，我们需要先将两组数据通过共同标识（比如玩家名称）合并，再统一渲染成一个完整的表格。

问题分析 #

你当前的代码逻辑是分别遍历playerName和playerRank两个数组，所以会输出两部分表格内容。而且同时映射的写法没有建立两个数组元素之间的关联，所以无法正确渲染合并后的行。

解决方案步骤 #

1. 合并数据源：通过玩家的共同标识（比如name字段），将两个数组的对应数据合并成一个包含Rank、Name、Points的新数组。
2. 简化状态管理：用单个状态存储合并后的完整数据，替代原来的两个独立状态。
3. 统一渲染表格：遍历合并后的数组，渲染每一行的三个字段。

修改后的完整代码 #

import axios from "axios";
import React, { useState, useEffect } from "react";

const Ranking = () => {
  // 用单个状态存储合并后的玩家数据
  const [mergedPlayers, setMergedPlayers] = useState([]);

  const fetchData = () => {
    const playerAPI = 'http://localhost:3008/api/players';
    const playerRankAPI = 'http://localhost:3008/api/highscore/players';
    
    const getPlayerInfo = axios.get(playerAPI);
    const getPlayerRank = axios.get(playerRankAPI);

    axios.all([getPlayerInfo, getPlayerRank]).then(
      axios.spread((playerInfoRes, playerRankRes) => {
        const playerList = playerInfoRes.data.players;
        const playerRankList = playerRankRes.data.players;

        // 合并数据：遍历排名数组，匹配对应玩家的信息
        const mergedData = playerRankList.map(rankPlayer => {
          // 通过name字段找到对应玩家的信息
          const matchedPlayer = playerList.find(player => player.name === rankPlayer.name);
          return {
            rank: rankPlayer.position, // 排名
            name: rankPlayer.name, // 玩家名称
            points: matchedPlayer ? matchedPlayer.score : rankPlayer.score // 取分数，优先用玩家信息里的，没有则用排名里的
          };
        });

        setMergedPlayers(mergedData);
      })
    );
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <table className="table table-bordered">
      <thead>
        <tr>
          <th>Rank</th>
          <th>Name</th>
          <th>Points</th>
        </tr>
      </thead>
      <tbody>
        {/* 遍历合并后的数组渲染每一行 */}
        {mergedPlayers.map((player, index) => (
          <tr key={player.name || index}>
            <td>{player.rank}</td>
            <td>{player.name}</td>
            <td>{player.points}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Ranking;

关键说明 #

• 数据合并逻辑：这里假设两个数组的玩家通过name字段匹配，你可以根据实际API返回的结构调整匹配字段（比如如果有唯一id的话，用id会更可靠）。
• 状态简化：只用一个mergedPlayers状态存储最终要渲染的数据，让组件逻辑更清晰。
• 容错处理：在匹配玩家信息时，用matchedPlayer ? ... : ...做了简单的容错，避免因为某个玩家在其中一个数组中不存在而报错。

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