如何在基于id的react中组合两个json api

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

const MyComponent = () => {
  const [data1, setData1] = useState([]);
  const [data2, setData2] = useState([]);

  useEffect(() => {
    fetchData1();
    fetchData2();
  }, []);

  const fetchData1 = async () => {
    try {
      const response = await fetch('https://api.example.com/data1');
      const jsonData = await response.json();
      setData1(jsonData);
    } catch (error) {
      console.error('Error fetching data1:', error);
    }
  };

  const fetchData2 = async () => {
    try {
      const response = await fetch('https://api.example.com/data2');
      const jsonData = await response.json();
      setData2(jsonData);
    } catch (error) {
      console.error('Error fetching data2:', error);
    }
  };

  const combineData = () => {
    // 根据id组合两个数据数组
    const combinedData = data1.map(item1 => {
      const matchingItem = data2.find(item2 => item2.id === item1.id);
      return { ...item1, ...matchingItem };
    });

    return combinedData;
  };

  const combinedData = combineData();

  return (
    <div>
      {combinedData.map(item => (
        <div key={item.id}>
          <h3>{item.title}</h3>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
};

export default MyComponent;