Javascript 将2个API数据源连接到1个react表的最佳方法？

我需要来自2个不同API的数据，它们都支持分页

如何以性能良好的方式在表中显示关联的数据

我需要加入他们的

id

，但是一个API返回的数据比另一个少，所以我不能简单地按1匹配1。我需要实现一个过滤器

---

是强制将数据源A映射到B的唯一方法吗？

如果数据来自两个不同的API，并且您要对不同的请求进行分离，那么您有很多选择。我个人的偏好是在控制器中设置

状态

，您可以通过

id映射每个响应

，然后您可以通过id选择附加数据：

import React, { useState, useEffect } from 'react';
import { keyBy } from 'lodash';

function TableComponent(props) {
  // Destructure your props...I'm assuming you pass some id into fetch data
  const { id } = props;
  
  // State
  const [tableData, setTableData] = useState([]);

  // Load data when id changes
  useEffect(() => {
    fetchData()
  }, [id]);

  async function fetchData() {
    // Get your data from each source
    const apiData_A = await fetchDataFromAPI_A(id);
    const apiData_B = await fetchDataFromAPI_B(id);
    // Key each data set by result ids
    const resultsMappedById_A = keyBy(apiData_A, 'id');
    const resultsMappedById_B = keyBy(apiData_B, 'id');
    // Combine data into a single set
    // this assumes your getting same results from each api
    const combinedDataSet = Object.keys(resultsMappedById_A)
      .reduce((acc, key) => {
        // Destructure results together, merging objects
        acc.push({
          ...resultsMappedById_A[key],
          ...resultsMappedById_B[key]
        });
        return acc;
      }, []);
    setTableData(combinedDataSet);
  }

  async function fetchDataFromAPI_A(id) {
    // Fetch your data and return results
  }

  async function fetchDataFromAPI_A(id) {
    // Fetch your data and return results
  }

  function renderTableRow(data) {
    return (
      <tr>
        <td>{data.id}</td>
        <td>{data.apiAProp}</td>
        <td>{data.apiBProp}</td>
      </tr>
    );
  }


  return (
   <table>
     { tableDataSet.map(renderTableRow) }
   </table>
  );
}

import React，{useState，useffect}来自“React”；
从“lodash”导入{keyBy}；
功能表组件（道具）{
//分解你的道具…我假设你传递一些id来获取数据
const{id}=props；
//陈述
const[tableData，setTableData]=useState（[]）；
//id更改时加载数据
useffect（（）=>{
fetchData（）
}，[id]）；
异步函数fetchData（）{
//从每个来源获取数据
const apiData_A=等待从api_A获取数据（id）；
const apiData_B=等待从API_B获取数据（id）；
//按结果ID为每个数据集设置关键帧
const resultsMappedById_A=keyBy（apiData_A，'id'）；
const resultsMappedById_B=keyBy（apiData_B，'id'）；
//将数据合并到单个集合中
//这假设您从每个api获得相同的结果
const combinedDataSet=Object.keys（resultsMappedById\u A）
.减少（（附件，钥匙）=>{
//一起分解结果，合并对象
加速推({
…resultsMappedById_A[键]，
…resultsMappedById_B[键]
});
返回acc；
}, []);
可设置数据（组合数据集）；
}
异步函数fetchDataFromAPI_A（id）{
//获取数据并返回结果
}
异步函数fetchDataFromAPI_A（id）{
//获取数据并返回结果
}
函数renderTableRow（数据）{
返回(
{data.id}
{data.apiAProp}
{data.apiBProp}
);
}
返回(
{tableDataSet.map（renderTableRow）}
);
}

---

请注意，可能有更有效的方法来实现这一点，这取决于您获取数据的方式和响应的内容，但这里提供的概念应该可以实现这一点，前提是基于您提供的信息，我的假设是正确的。

您有代码吗？-如果有，你能提供这些吗？