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

我有一个api服务，它使用React Query的钩子。所以我在普通函数中使用了useQuery（）。埃斯林特因此而发疯，但坦率地说，我不认为这有什么错。我没有在组件外部使用React的核心挂钩

在这种情况下，如何禁用react钩子/钩子规则

例如：

const getPaginatedConversations=async（游标=0，用户ID:string）=>{
试一试{
const res=等待api.get(
`/对话/？userId=${userId}&start=${cursor}&limit=20`
);
返回res.data.messages；
}捕捉（错误）{
抛出新错误（“Error.conversations.fetch_all”）；
}
};
const fetchConversations:MessageService[“fetchConversations”]=(
userId:string
) => {
常数{
数据，
孤岛，
正在获取下一页，
获取下一页，
错误，
}=使用无穷远(
[“对话”，用户ID]，
（{pageParam}）=>getPaginatedConversations（pageParam，userId），
{getNextPageParam:（lastPage）=>{return lastPage.cursor+20}
);
返回{
数据：数据？格式数据（data.pages）：[]，
加载：卸载，
isFetchingMore:isFetchingNextPage，
错误：错误&&error.message，
fetchMore:fetchNextPage，
canFetchMore:！isLoading&&！isFetchingNextPage&&！错误，
};
};
我没有在组件外部使用React的核心挂钩

它可能是间接的，但您使用的是react的核心钩子。您正在组件外部调用
useQuery
，而
useQuery
将右转并返回。这就是他们使用钩子命名约定的原因：提醒您和lint规则函数正在调用react钩子，因此它需要遵循与直接调用react钩子相同的规则，否则它将无法正常工作

换句话说，从您提供的信息来看，lint规则似乎正在发挥作用，并提醒您代码中存在错误

我没有在组件外部使用React的核心挂钩

它可能是间接的，但您使用的是react的核心钩子。您正在组件外部调用
useQuery
，而
useQuery
将右转并返回。这就是他们使用钩子命名约定的原因：提醒您和lint规则函数正在调用react钩子，因此它需要遵循与直接调用react钩子相同的规则，否则它将无法正常工作

换句话说，从您提供的信息来看，lint规则似乎正在发挥作用，提醒您代码中存在错误。
React hook应该在功能组件内部使用。您不应该尝试在组件外部使用它，这表明您的逻辑中存在错误/缺陷，因为自定义挂钩在下面使用react的核心挂钩

您可以在组件内部定义
fetchConversations
。
React钩子应该在功能组件内部使用。您不应该尝试在组件外部使用它，这表明您的逻辑中存在错误/缺陷，因为自定义挂钩在下面使用react的核心挂钩

您可以在组件内部定义
fetchConversations
。
但它真的是一个bug吗？它可以很好地使用这种配置。在单独的函数中抽象所有api调用比在我的组件中使用useQuery干净得多。
但这真的是一个bug吗
可能吧，不过由于您没有共享使用
useQuery
的代码，所以我只是做了一个有根据的猜测。useQuery依赖于useState、useRef和useEffect来完成其工作，如果在呈现组件外部调用，这些将不起作用。我在主要帖子中添加了一个示例。
fetchConversations
看起来如果在呈现函数组件外部调用，它将失败。你怎么称呼它？您说它“工作正常”，所以可能您已经在函数组件内部调用它，只需要将名称更新为自定义钩子名称（即，以“use”开头，如“useFetchConversations”）即可。我不推荐。通过使用命名约定，查看代码的人可以理解代码必须遵循钩子规则，如果他们忘记了，eslint可以向他们指出。如果禁用eslint，则有人（包括将来的您）可能会误用您编写的代码，而eslint无法指出这一点。要禁用eslint，请使用
//eslint禁用下一行react hooks/rules of hooks
。但这真的是一个bug吗？它可以很好地使用这种配置。在单独的函数中抽象所有api调用比在我的组件中使用useQuery干净得多。
但这真的是一个bug吗
可能吧，不过由于您没有共享使用
useQuery
的代码，所以我只是做了一个有根据的猜测。useQuery依赖于useState、useRef和useEffect来完成其工作，如果在呈现组件外部调用，这些将不起作用。我在主要帖子中添加了一个示例。
fetchConversations
看起来如果在呈现函数组件外部调用，它将失败。你怎么称呼它？您说它“工作正常”，所以可能您已经在函数组件内部调用它，只需要将名称更新为自定义钩子名称（即，以“use”开头，如“useFetchConversations”）即可。我不推荐。通过使用命名约定，查看代码的人可以理解代码必须遵循钩子规则，如果他们忘记了，eslint可以向他们指出。如果禁用eslint，则有人（包括将来的您）可能会误用您编写的代码，而eslint无法指出这一点。要禁用eslint，请使用
//eslint禁用下一行react钩子/钩子规则
。是
，因为自定义钩子在下面使用react的核心钩子
是
，因为自定义钩子在下面使用react的核心钩子