将 2 个 API 数据源加入 1 个反应 table 的最佳方式？

Question

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

如何以高效的方式在 table 中显示连接数据？

我需要加入他们的 id，但是一个 API returns 的数据比另一个少，所以我不能简单地一对一匹配。我需要实现一个过滤器.

是暴力映射数据源A到B的唯一方法吗？

Answer 1

如果数据来自两个不同的 API，并且您要发出单独的请求，您有多种选择。我个人的偏好是在你的控制器中有 state，你 map 每个响应由 id 然后你可以 select 通过 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>
  );
}

请注意，根据您获取数据的方式和响应内容，可能有更有效的方法来执行此操作，但假设我的假设根据您掌握的信息是正确的，此处提供的概念应该可以解决问题提供。

将 2 个 API 数据源加入 1 个反应 table 的最佳方式？

Best way to join 2 API data sources into 1 react table?

javascript

arrays

reactjs

react-table

react-table-v7