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

在基于id的React中组合两个JSON API的方法如下：

首先，确保你已经安装了React和相关的依赖。
创建一个React组件，可以是函数组件或类组件。
在组件的state中定义两个空数组，用于存储从两个JSON API获取的数据。
使用React的生命周期方法（如componentDidMount）或React Hooks（如useEffect）来获取数据。你可以使用fetch或axios等库来发送HTTP请求并获取JSON数据。
在获取数据的回调函数中，将返回的JSON数据存储到组件的state中。
当两个JSON API的数据都成功获取并存储到state中后，你可以根据id将它们组合起来。可以使用Array.map()方法遍历其中一个数组，并根据id在另一个数组中查找匹配的数据。
将组合后的数据渲染到组件的UI中，可以使用React的JSX语法来动态生成DOM元素。

下面是一个示例代码：

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;

在上面的示例中，我们使用了React的函数组件和React Hooks来实现组件的逻辑。通过fetchData1和fetchData2函数，我们分别从两个JSON API获取数据，并将其存储到组件的state中。然后，我们使用combineData函数根据id将两个数据数组组合起来，并将组合后的数据渲染到组件的UI中。

请注意，上述示例中的API地址和数据结构仅作为示例，你需要根据实际情况进行修改。另外，如果你使用的是类组件而不是函数组件，你可以将上述代码转换为类组件的形式。