如何将钩子导出到react.js中的其他函数？

// 自定义钩子 useSubmitStatus.js
import { useState } from 'react';

function useSubmitStatus() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState(null);

  const submitForm = async (formData) => {
    setIsSubmitting(true);
    try {
      // 模拟异步提交操作
      await new Promise((resolve) => setTimeout(resolve, 1000));
      // 提交成功后的处理
    } catch (error) {
      setSubmitError(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return { isSubmitting, submitError, submitForm };
}

export default useSubmitStatus;

// MyFormComponent.js
import React from 'react';
import useSubmitStatus from './useSubmitStatus';

function MyFormComponent() {
  const { isSubmitting, submitError, submitForm } = useSubmitStatus();

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    submitForm(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <input type="password" name="password" />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
      {submitError && <p>Error: {submitError.message}</p>}
    </form>
  );
}

export default MyFormComponent;

import { useState, useCallback } from 'react';

function useSubmitStatus() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState(null);

  const submitForm = useCallback(async (formData) => {
    setIsSubmitting(true);
    try {
      await new Promise((resolve) => setTimeout(resolve, 1000));
    } catch (error) {
      setSubmitError(error);
    } finally {
      setIsSubmitting(false);
    }
  }, []);

  return { isSubmitting, submitError, submitForm };
}