如何使用React检查远程源是否可用？

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

function RemoteSourceChecker({ url }) {
  const [isAvailable, setIsAvailable] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function checkRemoteSource() {
      try {
        const response = await fetch(url, { method: 'HEAD' });
        if (response.ok) {
          setIsAvailable(true);
        } else {
          setIsAvailable(false);
        }
      } catch (err) {
        setError(err);
        setIsAvailable(false);
      }
    }

    checkRemoteSource();
  }, [url]);

  if (isAvailable === null) {
    return <div>Checking...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return isAvailable ? <div>Available!</div> : <div>Not Available</div>;
}

export default RemoteSourceChecker;