React点击按钮调用含useQuery函数报invalid hook call如何解决

useQuery是React Hook，必须在函数组件的最顶层调用，不能放在事件回调、循环、条件判断内部执行。你将useQuery写在点击触发的onFollowingClick、onFollowClick函数内，只有点击按钮时才会执行Hook调用，违反了React Hook的调用规则，所以抛出报错。
另外关注、取关属于数据变更操作，本身不应该使用用于数据查询的useQuery，应该使用React Query提供的useMutation处理这类触发式的写入操作。

1. 在你的函数组件最顶层（不要放在任何回调、循环、条件分支内），声明关注、取关对应的useMutation：

import { useMutation, useQueryClient } from '@tanstack/react-query'

function 你的组件名() {
  // 组件顶层先声明相关Hook
  const queryClient = useQueryClient()

  // 取关操作的mutation
  const { mutate: deleteFollowerMutate, isLoading: deleteFollowerLoading } = useMutation({
    mutationFn: (followerId) => deleteFollower(followerId),
    // 操作成功后刷新关注列表缓存，保证页面数据同步
    onSuccess: () => {
      queryClient.invalidateQueries(['myFollowings']) // 替换为你自己的关注列表查询Key
    }
  })

  // 关注操作的mutation
  const { mutate: createFollowerMutate, isLoading: createFollowerLoading } = useMutation({
    mutationFn: (userInfo) => createFollower(userInfo), // 需要传参就调整参数接收逻辑
    onSuccess: () => {
      queryClient.invalidateQueries(['myFollowings'])
    }
  })

  // 剩下的你的组件原有逻辑
  // ...

2. 调整点击处理函数，不要在内部调用Hook，只执行mutation的触发方法：

const onFollowingClick = (myFollowerId) => {
  deleteFollowerMutate(myFollowerId)
  console.log("following call")
}

const onFollowClick = (followUserInfo) => {
  createFollowerMutate(followUserInfo)
  console.log("follower call")
}

3. 修改按钮的onClick绑定，传入当前循环项对应的用户ID等参数：

<Button
  // 其他原有属性不变
  onClick = { () => {
    if(myFollowings.includes(e.requested_profile.Userlink)){
      // 替换为当前循环项对应的followerId字段
      onFollowingClick(e.myFollowerId)
    } else {
      // 需要传递关注用户的信息就传入，不需要就不用传
      onFollowClick(e.requested_profile)
    }
  } }
>
{/* 按钮内容不变 */}
</Button>

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