反应钩子参数导致无限重新渲染

Question

我有两个自定义反应钩子，一个只是另一个的包装器。

第一个是基本的 fetch 钩子，它返回状态和结果或错误。

interface State<T> {
  status: 'idle' | 'pending' | 'error' | 'success';
  data?: T;
  error?: string;
}

interface Cache<T> {
  [url: string]: T;
}

type Action<T> =
  | { type: 'request' }
  | { type: 'success'; payload: T }
  | { type: 'failure'; payload: string };

export function useFetch<T = unknown>(
  url: string,
  options?: RequestInit,
  cached = false
): State<T> {
  const cache = useRef<Cache<T>>({});
  const cancelRequest = useRef(false);

  const initialState: State<T> = {
    status: 'idle',
    error: undefined,
    data: undefined,
  };

  const fetchReducer = (state: State<T>, action: Action<T>): State<T> => {
    switch (action.type) {
      case 'request':
        return { ...initialState, status: 'pending' };
      case 'success':
        return { ...initialState, status: 'success', data: action.payload };
      case 'failure':
        return { ...initialState, status: 'error', error: action.payload };
      default:
        return state;
    }
  };

  const [state, dispatch] = useReducer(fetchReducer, initialState);

  useEffect(() => {
    const fetchData = async () => {
      dispatch({ type: 'request' });

      if (cache.current[url] && cached) {
        dispatch({ type: 'success', payload: cache.current[url] });
      } else {
        try {
          const res = await fetch(url, options);
          const json = await res.json();
          cache.current[url] = json;

          if (cancelRequest.current) return;

          if (res.status !== 200) {
            dispatch({ type: 'failure', payload: json.error });
          } else {
            dispatch({ type: 'success', payload: json });
          }
        } catch (error) {
          if (cancelRequest.current) return;

          dispatch({ type: 'failure', payload: error.message });
        }
      }
    };

    fetchData();

    return () => {
      cancelRequest.current = true;
    };
  }, [url, options, cached]);

  return state;
}

export default useFetch;

第二个钩子是一个包装器，它为useFetch 钩子提供一些获取选项，例如包含cookie 的标头。这样我就不必一遍又一遍地编写相同的代码来针对我的 API 执行一些请求。我称之为 useAPICall

export const useAPICall = <T>(url: string, body?: any, method = 'GET') => {
  return useFetch<T>(
    apiEndpoint + url,
    {
      method,
      body,
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
        'x-access-token': getCookie('token'),
      },
    },
    false
  );
};

getCookie 从文档中返回名为 token 的 cookie。

这就是我使用useAPICall 钩子的方式：

const { status, data, error } = useAPICall<Request>('/example/route');

我的问题是，每当我想使用 useAPICall 或 useFetch 钩子时，同时提供选项对​​象作为参数，它会导致无限重新渲染和超出最大更新深度错误。

我发现问题出在我的useFetch 钩子中useEffect 的选项依赖中，当我从依赖数组中删除它时，获取请求运行良好。

唯一的问题是我的 linter 告诉我在依赖数组中包含选项，因为 useEffect 依赖它。

我现在想知道如何正确地做到这一点。

Answer 1

问题是将对象文字作为options 传递将导致您的useEffect() 的依赖关系在每次钩子重新渲染时发生变化，这意味着，正如您所经历的那样，您将重复获取，因为效果会每次刚刚完成上一次提取时，使用新的 options 引用再次运行。

为了打破循环，你需要要么

• 记住你从useAPICall()传入的options
• 将您的options 存储在useRef() 中的useFetch() 中

此外，由于您希望获取对 options 更改敏感，如果您决定采用第二种方法，则需要在每次 useFetch() 钩子呈现时手动将新引用与前一个引用进行比较，并且只有在值发生变化时才使用新的引用。

以下是在 useAPICall() 中实施第一种方法的方法，而单独留下 useFetch()：

export const useAPICall = <T>(url: string, body?: any, method = 'GET') => {
  const options = {
    method,
    body,
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
      'x-access-token': getCookie('token'),
    },
  };
  const ref = useRef(options);

  if (
    ref.current.method !== options.method
    || ref.current.body !== options.body
    || ref.current.headers['x-access-token'] !== options.headers['x-access-token']
  ) {
    ref.current = options;
  }

  return useFetch<T>(
    apiEndpoint + url,
    ref.current,
    false
  );
};

下面是您如何实现第二种方法的大部分内容，而将 useAPICall() 单独留下，尽管我留下了一条评论，您需要在其中充实它的细节：

interface State<T> {
  status: 'idle' | 'pending' | 'error' | 'success';
  data?: T;
  error?: string;
}

interface Cache<T> {
  [url: string]: T;
}

type Action<T> =
  | { type: 'request' }
  | { type: 'success'; payload: T }
  | { type: 'failure'; payload: string };

const initialState: State<any> = {
  status: 'idle',
  data: undefined,
  error: undefined,
};

function fetchReducer<T>(state: State<T>, action: Action<T>): State<T> {
  switch (action.type) {
    case 'request':
      return { ...initialState, status: 'pending' };
    case 'success':
      return { ...initialState, status: 'success', data: action.payload };
    case 'failure':
      return { ...initialState, status: 'error', error: action.payload };
    default:
      return state;
  }
};

// if (prev == next) { return prev; } else { return next; }
function headersReducer(prev?: HeadersInit, next?: HeadersInit) {
  if (prev === next) {
    return prev;
  }

  if (!prev || !next) {
    return next;
  }

  if (
    // headers are equal
  ) {
    return prev;
  }

  return next;
}

// if (prev == next) { return prev; } else { return next; }
function optionsReducer(prev?: RequestInit, next?: RequestInit) {
  if (prev === next) {
    return prev;
  }

  if (!prev || !next) {
    return next;
  }

  if (
    prev.body === next.body
    && prev.cache === next.cache
    && prev.credentials === next.credentials
    && prev.headers === headersReducer(prev.headers, next.headers)
    && prev.integrity === next.integrity
    && prev.keepalive === next.keepalive
    && prev.method === next.method
    && prev.mode === next.mode
    && prev.redirect === next.redirect
    && prev.referrer === next.referrer
    && prev.referrerPolicy === next.referrerPolicy
    && prev.signal === next.signal
    && prev.window === next.window
  ) {
    return prev;
  }

  return next;
}

export function useFetch<T = unknown>(
  url: string,
  options?: RequestInit,
  cached = false
): State<T> {
  const cache = useRef<Cache<T>>({});
  const optionsRef = useRef<RequestInit>();
  const [state, dispatch] = useReducer(fetchReducer, initialState);

  optionsRef.current = optionsReducer(optionsRef.current, options);
  const currentOptions = optionsRef.current;

  useEffect(() => {
    let cancelRequest = false;

    const fetchData = async () => {
      dispatch({ type: 'request' });

      if (cache.current[url] && cached) {
        dispatch({ type: 'success', payload: cache.current[url] });
      } else {
        try {
          const res = await fetch(url, currentOptions);
          const json = await res.json();
          cache.current[url] = json;

          if (cancelRequest) return;

          if (res.status !== 200) {
            dispatch({ type: 'failure', payload: json.error });
          } else {
            dispatch({ type: 'success', payload: json });
          }
        } catch (error) {
          if (cancelRequest) return;

          dispatch({ type: 'failure', payload: error.message });
        }
      }
    };

    fetchData();

    return () => {
      cancelRequest = true;
    };
  }, [url, currentOptions, cached]);

  return state;
}

export default useFetch;