如何使用react钩子执行多个异步请求？

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response1 = await fetch('https://api.example.com/data1');
        const data1 = await response1.json();
        setData1(data1);

        const response2 = await fetch('https://api.example.com/data2');
        const data2 = await response2.json();
        setData2(data2);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {data1 && <p>Data 1: {data1}</p>}
      {data2 && <p>Data 2: {data2}</p>}
    </div>
  );
};

export default MyComponent;