如何使用React Hooks和Context API正确地将来自useEffect内部调用的多个端点的数据添加到状态对象？

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

const DataContext = createContext();

export function useData() {
  return useContext(DataContext);
}

export function DataProvider({ children }) {
  const [data, setData] = useState({});

  return (
    <DataContext.Provider value={{ data, setData }}>
      {children}
    </DataContext.Provider>
  );
}

import React, { useEffect } from 'react';
import { useData } from './DataContext';

function MyComponent() {
  const { data, setData } = useData();

  useEffect(() => {
    // 调用多个端点获取数据
    const fetchData = async () => {
      const endpoint1Data = await fetchEndpoint1();
      const endpoint2Data = await fetchEndpoint2();
      const endpoint3Data = await fetchEndpoint3();

      // 将数据添加到状态对象
      setData({
        ...data,
        endpoint1Data,
        endpoint2Data,
        endpoint3Data,
      });
    };

    fetchData();
  }, []);

  return (
    <div>
      {/* 使用数据 */}
      <p>Endpoint 1 Data: {data.endpoint1Data}</p>
      <p>Endpoint 2 Data: {data.endpoint2Data}</p>
      <p>Endpoint 3 Data: {data.endpoint3Data}</p>
    </div>
  );
}

export default MyComponent;