TypeScript + React中封装一个hook当点击确定后提交请求在这期间确定按钮loading展示

在TypeScript和React中封装一个自定义Hook来管理按钮的点击事件、发送请求，并在请求进行时显示加载状态，可以按照以下步骤进行：

首先，定义一个接口（如果需要的话）来描述异步函数的类型，这将作为我们自定义Hook的参数。接着，实现这个Hook并返回相关的状态和方法。

下面是一个简单的示例：

typescript 复制代码

import { useState, useCallback } from 'react';

// 如果你有特定的请求参数和响应类型，可以在这里定义它们
interface RequestParams {
  // 定义请求参数的类型
}

interface ResponseData {
  // 定义响应数据的类型
}

// 这是我们自定义Hook的类型签名
function useSubmitWithLoading<T extends RequestParams, R extends ResponseData>(
  submitFunction: (params: T) => Promise<R>
) {
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<Error | null>(null);

  const handleSubmit = useCallback(async (params: T) => {
    setLoading(true);
    setError(null);
    try {
      const response = await submitFunction(params);
      // 处理响应
      return response;
    } catch (err) {
      setError(err as Error);
      throw err; // 如果你想在组件中进一步处理错误，可以重新抛出
    } finally {
      setLoading(false);
    }
  }, [submitFunction]);

  return { loading, error, handleSubmit };
}

export default useSubmitWithLoading;

在这个自定义Hook中，我们使用了useState来跟踪请求的加载状态和任何可能出现的错误。handleSubmit是一个封装的异步函数，它会调用传入的submitFunction并处理加载状态和错误。

在组件中使用这个Hook可能如下所示：

typescript 复制代码

import React, { FormEvent } from 'react';
import useSubmitWithLoading from './useSubmitWithLoading'; // 假设你的hook文件名是这个

// 假设这是你的API调用函数的类型
async function submitRequest(data: RequestParams): Promise<ResponseData> {
  // 实际的API请求逻辑
  // 例如：return await axios.post('/api/submit', data);
}

function YourComponent() {
  // 使用自定义Hook
  const { loading, error, handleSubmit } = useSubmitWithLoading(submitRequest);

  // 处理表单提交
  const handleFormSubmit = async (event: FormEvent) => {
    event.preventDefault();
    // 假设你要提交的数据
    const dataToSubmit = {/* ... */};
    try {
      await handleSubmit(dataToSubmit);
      // 处理成功的情况
    } catch {
      // 错误已经被设置，可以在这里进一步处理或显示
    }
  };

  return (
    <form onSubmit={handleFormSubmit}>
      {/* ...你的表单元素... */}
      <button type="submit" disabled={loading}>
        {loading ? 'Submitting...' : 'Submit'}
      </button>
      {error && <div>Error: {error.message}</div>}
    </form>
  );
}

export default YourComponent;

在这个组件中，我们使用了useSubmitWithLoading Hook来处理表单的提交事件。当用户点击提交按钮时，handleFormSubmit会被调用，它会进一步调用handleSubmit。在请求进行时，按钮会显示加载状态并被禁用以防止重复提交。如果发生错误，它会被捕获并可以在组件中显示。

请记住，这只是一个基本的例子。在实际应用中，你可能需要根据你的API和组件逻辑做进一步的调整，比如处理请求成功后的状态更新和错误处理。

TypeScript + React中封装一个hook当点击确定后提交请求 在这期间确定按钮loading展示

TypeScript + React中封装一个hook当点击确定后提交请求在这期间确定按钮loading展示