React返回自定义钩子中的函数，其内部钩子返回对象

import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading };
}

export default useFetchData;

import React from 'react';
import useFetchData from './useFetchData';

function MyComponent() {
  const { data, loading } = useFetchData('https://api.example.com/data');

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <div>No data available</div>
      )}
    </div>
  );
}

export default MyComponent;

function useFetch(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      }
    }

    fetchData();
  }, [url]);

  return [data, error];
}

function useLoading(initialLoading = true) {
  const [loading, setLoading] = useState(initialLoading);
  useEffect(() => setLoading(false), []);
  return loading;
}

function useFetchData(url) {
  const [data, error] = useFetch(url);
  const loading = useLoading();
  return { data, loading, error };
}