自定义Hook二次调用状态未同步至主组件原因咨询

核心原因 #

你的自定义Hook内部大概率存在异步状态覆盖或竞态条件问题：

• 第一次调用sendRequest时，Hook会将isloading设为true，请求完成后改为false并触发Logic1
• 但在Logic1中调用第二次sendRequest时，第一次请求收尾阶段的isloading = false会直接覆盖第二次请求刚设置的isloading = true，导致主组件无法感知第二次请求的加载状态
• 另一种可能是sendRequest的实现未处理连续调用场景：每次调用直接重置状态，旧请求的异步回调会干扰新请求的状态更新

排查方向 #

1. 检查sendRequest的实现逻辑：是否在请求开始时设置isloading = true，请求结束（成功/失败）时设置isloading = false？如果是，两次连续调用就会出现状态覆盖问题
2. 查看Hook是否存在未处理的竞态：比如没有标记请求的唯一性，旧请求的异步回调会覆盖新请求的状态

修复方案 #

方案1：给请求添加唯一标识（解决竞态问题）

在自定义Hook内部用useRef追踪当前请求的唯一ID，只有最新请求的回调才能更新状态：

const useCustomHook = () => {
  const [isloading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const currentRequestId = useRef(null);

  const sendRequest = async (url, data, callback) => {
    const requestId = Date.now();
    currentRequestId.current = requestId;
    
    setIsLoading(true);
    setError(null);
    
    try {
      const response = await fetch(url, {
        method: 'POST',
        body: JSON.stringify(data)
      });
      const result = await response.json();
      
      // 仅当当前请求为最新时更新状态
      if (currentRequestId.current === requestId) {
        setIsLoading(false);
      }
      
      callback?.(result);
    } catch (err) {
      if (currentRequestId.current === requestId) {
        setIsLoading(false);
        setError(err.message);
      }
    }
  };

  return { isloading, error, sendRequest };
};

方案2：多请求状态追踪

如果需要支持多个并发/连续请求，改用数组追踪所有加载中的请求，主组件通过判断数组长度控制模态框：

const useCustomHook = () => {
  const [loadingRequests, setLoadingRequests] = useState([]);
  const [errors, setErrors] = useState([]);

  const sendRequest = async (url, data, callback) => {
    const requestKey = `${url}-${Date.now()}`;
    setLoadingRequests(prev => [...prev, requestKey]);
    
    try {
      const response = await fetch(url, {
        method: 'POST',
        body: JSON.stringify(data)
      });
      const result = await response.json();
      
      setLoadingRequests(prev => prev.filter(key => key !== requestKey));
      callback?.(result);
    } catch (err) {
      setLoadingRequests(prev => prev.filter(key => key !== requestKey));
      setErrors(prev => [...prev, err.message]);
    }
  };

  // 主组件用这个状态控制模态框
  const isloading = loadingRequests.length > 0;
  const error = errors.at(-1) || null;

  return { isloading, error, sendRequest };
};

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