React自定义Fetch Hook参数更新强制重请求问题排查

• 首次点击无法获取最新结果：React 对同一事件回调内的 state 更新做异步批处理，setName 执行后不会立刻同步更新组件内的name值，此时调用getData，函数闭包捕获的还是上一次渲染时的旧参数数组，请求携带的是旧参数，自然无法返回新结果。
• 参数加入依赖后触发无限循环：每次组件渲染时，传入useFetch的[name]数组、getYearByName函数都是新创建的引用，React 对引用类型依赖做全等比较时会判定为依赖变化，反复触发useEffect执行请求，形成死循环。

1. 用useRef存储最新的请求参数、请求执行函数，既可以保证手动调用getData时永远拿到最新值，也不会因为引用变化触发不必要的重渲染/Effect执行
2. 自动触发请求的useEffect依赖参数的序列化字符串值，而非数组本身引用，避免引用变化导致的重复执行
3. 增加竞态判断，避免快速切换参数时旧请求返回覆盖新结果
4. 手动调用getData时支持传入临时参数，不传则默认读取最新绑定的参数

修复后的 useFetch 实现 #

import { useState, useEffect, useRef, useCallback } from "react";

const useFetch = (params, requestFn) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  // 存储最新参数和请求函数，解决闭包陈旧值问题
  const paramsRef = useRef(params);
  const requestFnRef = useRef(requestFn);
  // 每次渲染同步更新ref中存储的最新值
  paramsRef.current = params;
  requestFnRef.current = requestFn;

  const getData = useCallback(async (customParams) => {
    setIsLoading(true);
    setError(null);
    // 支持传入临时参数，不传则默认使用最新绑定的参数
    const finalParams = customParams ?? paramsRef.current;
    // 竞态标记，避免旧请求返回覆盖新结果
    let isCanceled = false;
    try {
      const res = await requestFnRef.current(...finalParams);
      if (!isCanceled) {
        setData(res);
        setIsLoading(false);
      }
    } catch (err) {
      if (!isCanceled) {
        setError(err);
        setIsLoading(false);
      }
    }
    // 组件卸载/新请求发起时，忽略旧请求的结果更新
    return () => {
      isCanceled = true;
    };
  }, []);

  useEffect(() => {
    const cancelRequest = getData();
    return cancelRequest;
    // 仅当参数实际内容变化时才重新自动发起请求，规避数组引用变化导致的死循环
  }, [JSON.stringify(params), getData]);

  return {
    data,
    error,
    isLoading,
    getData
  };
};

export default useFetch;

App.js 调用调整 #

请求函数建议用useCallback包裹保持引用稳定，参数修改后Hook会自动触发请求，不需要在点击事件里手动凑state更新时序；需要手动刷新时直接调用getData()即可，会自动读取最新参数：

import { useState, useCallback } from "react";
import "./styles.css";
import useFetch from "./useFetch";

export default function App() {
  const url = "https://api.agify.io/";

  const getYearByName = useCallback(async (name) => {
    const response = await fetch(url + `?name=${name}`, {
      method: "GET"
    });
    return await response.json();
  }, [url]);

  const [name, setName] = useState("Nahuel");

  const { data, isLoading, getData } = useFetch([name], getYearByName);

  return (
    <div className="App">
      <button onClick={() => {
        setName("Camila")
        // 参数变化后Hook会自动发请求，无需手动调用
        // 需要手动刷新时直接调用getData()即可
      }}>
          Change name
      </button>
      {isLoading ? (
        <div> 加载中 </div>
      ) : data ? (
        <>
          <h1>{data.name}</h1>
          <h2>{data.age}</h2>
        </>
      ) : null}
    </div>
  );
}

• 参数保持数组格式，支持任意数量的请求入参，满足复用性要求
• 自动触发逻辑：参数内容实际变化时自动发起请求，不会出现无限循环问题
• 手动触发逻辑：调用getData()时永远读取最新参数，不会出现闭包拿旧值的问题
• 内置竞态处理，快速切换参数时不会出现旧结果覆盖新结果的问题
• 支持给getData传自定义参数临时覆盖默认参数，适配手动触发时传临时查询条件的场景

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