在 React 组件外使用钩子时如何禁用 eslint 钩子规则

Question

我有一个使用 React-Query 钩子的 api 服务。所以我在普通函数中有 useQuery() 。 Eslint 因为这个而发疯，但坦率地说，我认为这没有任何问题。我没有在组件外部使用 React 的核心钩子。

在这种情况下如何禁用 react-hooks/rules-of-hooks？

示例：

const getPaginatedConversations = async (cursor = 0, userId: string) => {
  try {
    const res = await api.get(
      `/conversations/?userId=${userId}&start=${cursor}&limit=20`
    );
    return res.data.messages;
  } catch (err) {
    throw new Error("error.conversations.fetch_all");
  }
};


const fetchConversations: MessageService["fetchConversations"] = (
  userId: string
) => {
  const {
    data,
    isLoading,
    isFetchingNextPage,
    fetchNextPage,
    error,
  } = useInfiniteQuery(
    ["conversations", userId],
    ({ pageParam }) => getPaginatedConversations(pageParam, userId),
    { getNextPageParam: (lastPage) => {return lastPage.cursor + 20} }
  );
  return {
    data: data ? formatData(data.pages) : [],
    loading: isLoading,
    isFetchingMore: isFetchingNextPage,
    error: error && error.message,
    fetchMore: fetchNextPage,
    canFetchMore: !isLoading && !isFetchingNextPage && !error, 
  };
};

Answer 1

I'm not using React's core hook outside components.

它可能是间接的，但你是使用react的核心钩子。你在组件外调用useQuery，useQuery会右转而call useState, useRef, and useEffect. That's the reason they used the naming convention of hooks: to alert you and the lint rule that the function is calling react hooks, and thus it needs to follow the same rules of hooks直接调用react hooks，否则无法正常工作

换句话说，根据您提供的信息，lint 规则似乎正在发挥作用并提醒您注意代码中的错误。

Answer 2

React hooks 应该用在功能组件内部。您不应该尝试在组件外部使用它，这表明您的逻辑中有一个 bug/flaw，因为自定义挂钩在下面使用了 React 的核心挂钩。

您可以在组件内部定义fetchConversations。

在 React 组件外使用钩子时如何禁用 eslint 钩子规则

How to disable eslint rule-of-hook when using hook outside a React component

reactjs

eslint