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

import React, { Component } from 'react';
import axios from 'axios';

class DataTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data1: [],
      data2: [],
      isLoading: true,
    };
  }

  componentDidMount() {
    const api1 = 'http://api1.example.com/data';
    const api2 = 'http://api2.example.com/data';

    // 发送异步请求获取API数据
    Promise.all([axios.get(api1), axios.get(api2)])
      .then(([response1, response2]) => {
        this.setState({
          data1: response1.data,
          data2: response2.data,
          isLoading: false,
        });
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
        this.setState({ isLoading: false });
      });
  }

  render() {
    const { data1, data2, isLoading } = this.state;

    if (isLoading) {
      return <div>Loading...</div>;
    }

    // 合并数据源，生成表格的行和列
    const mergedData = /* 合并数据的逻辑 */;

    return (
      <table>
        <thead>
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            {/* 其他表头列 */}
          </tr>
        </thead>
        <tbody>
          {mergedData.map((item) => (
            <tr key={item.id}>
              <td>{item.column1}</td>
              <td>{item.column2}</td>
              {/* 其他表格列 */}
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default DataTable;