React自定义fetch hook状态滞后一步 受useState异步行为影响问题求助

现有实现的核心问题 #

你当前的设计存在两个核心缺陷：

• 触发逻辑不合理：依赖body状态的useEffect触发请求，setBody是异步更新状态的，修改后要等下一次渲染才会触发effect执行请求，本身就有延迟
• 调用链路不通：你返回的sendPost本质是setBody，只负责修改本地状态，没有把请求的Promise返回给调用方，调用方自然无法感知请求的完成时机，调用后立刻取data/error只能拿到上一次渲染的旧值

正确实现方案 #

你需要把请求逻辑从useEffect中移到触发函数内部，同时让触发函数返回Promise，让调用方可以直接await拿到结果，同时支持GET、POST等通用请求方法，实现如下：

import { useState, useCallback, useRef, useEffect } from 'react';
// 假设axiosInstance是你已经封装好的全局请求实例
export const useMutation = (defaultUrl, defaultOptions = {}) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  // 存储取消令牌，避免组件卸载后更新状态触发警告
  const abortControllerRef = useRef(null);

  const trigger = useCallback(async (payload = {}, runtimeOptions = {}) => {
    // 合并配置：运行时传入的配置优先级高于默认配置
    const { 
      url = defaultUrl, 
      method = 'POST',
      ...restOptions 
    } = { ...defaultOptions, ...runtimeOptions };

    // 取消上一次未完成的重复请求
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }
    abortControllerRef.current = new AbortController();

    setError(null);
    setIsLoading(true);
    try {
      let response;
      // 区分GET和POST的参数传递规则
      if (method.toUpperCase() === 'GET') {
        response = await axiosInstance.get(url, {
          params: payload,
          signal: abortControllerRef.current.signal,
          ...restOptions
        });
      } else {
        response = await axiosInstance({
          url,
          method,
          data: payload,
          signal: abortControllerRef.current.signal,
          ...restOptions
        });
      }
      const result = response.data;
      setData(result);
      // 把结果返回给调用方
      return [null, result];
    } catch (err) {
      // 忽略主动取消的请求错误
      if (err.name !== 'CanceledError') {
        const errResult = err.response?.data || err.message || '请求失败';
        setError(errResult);
        // 把错误返回给调用方
        return [errResult, null];
      }
      return [null, null];
    } finally {
      if (!abortControllerRef.current?.signal.aborted) {
        setIsLoading(false);
      }
    }
  }, [defaultUrl, defaultOptions]);

  // 组件卸载时取消未完成的请求
  useEffect(() => {
    return () => abortControllerRef.current?.abort();
  }, []);

  return [{ data, isLoading, error }, trigger];
};

组件使用示例 #

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [{ data: mutData, error: mutError, isLoading }, sendRequest] = 
    useMutation("/auth/pre-signup");
  
const registerUser = async () => {
  // 两种方式获取请求结果：
  // 方式1：await直接拿到返回值，无需等待状态更新
  const [error, result] = await sendRequest({
    email,
    password,
  });
  if (error) {
    // 直接展示错误提示
    alert(typeof error === 'string' ? error : error.message);
    return;
  }
  // 注册成功直接跳转
  window.location.href = '/dashboard';

  // 方式2：也可以直接使用hook返回的mutData、mutError状态，用于渲染页面提示类内容
};

实现特性说明 #

• 调用触发函数时直接发起请求，没有useEffect导致的渲染延迟
• 触发函数返回Promise，调用方可以直接await拿到结果，无需依赖状态更新
• 同时支持GET、POST、PUT、DELETE等所有请求方法，默认使用POST，可通过配置自定义
• 内置重复请求取消、组件卸载请求取消逻辑，避免内存泄漏和状态更新警告
• 支持运行时覆盖url、请求头等配置，通用性更强

内容的提问来源于stack exchange，提问作者adammartiska