如何在React中组合多个自定义钩子抓取？

import React from 'react';

// 自定义钩子1：用于抓取数据1
const useFetchData1 = () => {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    // 执行抓取逻辑1，并更新数据
    const fetchData1 = async () => {
      const response = await fetch('https://api.example.com/data1');
      const result = await response.json();
      setData(result);
    };

    fetchData1();
  }, []);

  return data;
};

// 自定义钩子2：用于抓取数据2
const useFetchData2 = () => {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    // 执行抓取逻辑2，并更新数据
    const fetchData2 = async () => {
      const response = await fetch('https://api.example.com/data2');
      const result = await response.json();
      setData(result);
    };

    fetchData2();
  }, []);

  return data;
};

// 组合自定义钩子：用于同时抓取数据1和数据2
const useCombinedFetch = () => {
  const data1 = useFetchData1();
  const data2 = useFetchData2();

  // 在这里可以对数据进行处理和组合
  const combinedData = {
    data1,
    data2,
  };

  return combinedData;
};

// 使用组合后的钩子
const MyComponent = () => {
  const combinedData = useCombinedFetch();

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

export default MyComponent;