时间戳

首页 > 解决方案 > 将 2 个 API 数据源加入 1 个反应表的最佳方法？

javascript - 将 2 个 API 数据源加入 1 个反应表的最佳方法？

问题描述

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

如何以高性能的方式在表中显示连接的数据？

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

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

标签： javascriptarraysreactjsreact-tablereact-table-v7

解决方案

如果数据来自两个不同的 API，并且您正在发出单独的请求，那么您有很多选择。我个人的偏好是state在您的控制器中拥有map每个响应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>
  );
}

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

推荐阅读