如何将两个API数据映射到同一React表格中展示？

问题场景 #

在React项目中通过axios调用两个API分别获取玩家基础信息与排名数据，当前代码因两次独立map渲染，导致数据被拆分到两个表格区域展示，需要调整代码将所有数据合并后在同一个表格内呈现完整的玩家信息（排名、姓名、积分等）。

原始代码 #

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

const Ranking = () => {
  const [playerName, setPlayerName] = useState([]);
  const [playerRank, setPlayerRank] = useState([]);

  const fetchData = () => {
    const playerAPI = 'http://localhost:3008/api/players';
    const playerRank = 'http://localhost:3008/api/highscore/players';

    const getINFOPlayer = axios.get(playerAPI)
    const getPlayerRank = axios.get(playerRank)
    axios.all([getINFOPlayer, getPlayerRank]).then(
      axios.spread((...allData) => {
        const allDataPlayer = allData[0].data.players
        const getINFOPlayerRank = allData[1].data.players

        setPlayerName(allDataPlayer)
        setPlayerRank(getINFOPlayerRank)
      })
    )
  }
  
  useEffect(() => {
    fetchData()
  }, [])

  return (
    <table class="table table-bordered">
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Points</th>
      </tr>
        <tbody>
          {playerName?.map((name) => {
            return (
              <tr key={name}>
                <td>{name.name}</td>
                <td>{name.id}</td>
              </tr>
            )
          })}
        </tbody>
        <tbody>
          {playerRank?.map((name) => {
            return (
              <tr key={name}>
                <td>{name.id}</td>
                <td>{name.score}</td>
              </tr>
            )
          })}
        </tbody>
    </table>
  )
}

export default Ranking

修改后代码 #

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

const Ranking = () => {
  const [playerName, setPlayerName] = useState([]);
  const [playerRank, setPlayerRank] = useState([]);
  const [player, setPlayer] = useState([]);

  const fetchData = () => {
    const playerAPI = 'http://localhost:3008/api/players';
    const playerRank = 'http://localhost:3008/api/highscore/players';

    const getINFOPlayer = axios.get(playerAPI)
    const getPlayerRank = axios.get(playerRank)
    axios.all([getINFOPlayer, getPlayerRank]).then(
      axios.spread((...allData) => {
        const allDataPlayer = allData[0].data.players
        const getINFOPlayerRank = allData[1].data.players
        const newPlayer = allDataPlayer.map(name => {
          const pr = getINFOPlayerRank.find(rank => name.id === rank.id)
          return {
            id: name.id,
            name: name.name,
            status: name.status,
            position: pr.position,
            score: pr.score
          }
        })
        setPlayerName(allDataPlayer)
        setPlayerRank(getINFOPlayerRank)
        console.log(newPlayer)
        setPlayer(newPlayer)
      })
    )
  }
  useEffect(() => {
    fetchData()
  }, [])
  
  return (
    <table class="table table-bordered">
      <tr>
        <th>排名</th>
        <th>姓名</th>
        <th>状态</th>
        <th>积分</th>
      </tr>
        <tbody>
        {player?.map((item) => {
          return (
            <tr key={item.id}>
              <td>{item.position}</td>
              <td>{item.name}</td>
              <td>{item.status}</td>
              <td>{item.score}</td>
            </tr>
          )
        })}
        </tbody>
    </table>
  )
}

export default Ranking

核心修改点 #

• 新增player状态变量，专门存储合并后的完整玩家数据
• 在获取两个API响应后，通过map遍历玩家基础信息，再用find根据id匹配对应的排名数据，将两类数据合并为包含完整字段的对象数组
• 渲染表格时仅遍历合并后的player数组，确保所有数据在同一表格区域展示
• 调整表头文字与表格内容的对应关系，保证展示逻辑一致

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