我需要在Reactjs中调用两个API

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

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

  useEffect(() => {
    // 调用第一个API
    axios.get('api_url_1')
      .then(response => {
        setData1(response.data);
      })
      .catch(error => {
        console.error('Error fetching data from API 1:', error);
      });

    // 调用第二个API
    axios.get('api_url_2')
      .then(response => {
        setData2(response.data);
      })
      .catch(error => {
        console.error('Error fetching data from API 2:', error);
      });
  }, []);

  return (
    <div>
      {/* 显示第一个API的数据 */}
      {data1 && <div>{data1}</div>}

      {/* 显示第二个API的数据 */}
      {data2 && <div>{data2}</div>}
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>调用两个API示例</h1>
      <MyComponent />
    </div>
  );
}