React Query useMutation调用API首次触发停留在isIdle状态如何解决

isIdle是useMutation的初始状态，代表当前mutation尚未被触发执行。首次调用mutate后仍停留在该状态，可按以下方案逐一排查解决：

• 排查闭包陷阱问题
  如果你在useCallback、useEffect或者自定义封装的公共函数中持有了旧的mutate实例引用，就会出现调用逻辑和状态更新不同步的问题。请不要将mutate方法存入useRef、不要赋值给初始化一次就长期持有的变量，同时确保mutate方法被正确加入相关hooks的依赖项数组中。
• 检查mutationFn是否正确返回Promise
  useMutation要求传入的mutationFn必须返回接口调用对应的Promise，否则React Query无法监听到异步请求的完成状态，会一直停留在isIdle状态。

  错误示例：没有返回Promise

  const generateOtpMutation = useMutation((params) => {
    // 没有return，函数返回值为undefined
    axios.post('/api/otp/generate', params)
  })
  

  正确示例：返回接口调用Promise

  const generateOtpMutation = useMutation((params) => {
    return axios.post('/api/otp/generate', params)
  })
  // 箭头函数简写写法
  const generateOtpMutation = useMutation(params => axios.post('/api/otp/generate', params))
  

• 并发模式下的状态更新异常修复
  如果你使用的是React 18+的并发渲染模式，搭配React Query v3旧版本时会偶发状态更新不生效的问题。可升级到React Query v3最新稳定版，或切换到v4/v5版本。也可以改用mutateAsync方法自行处理异步逻辑，避免状态同步异常：

  const handleOtpGenerate = async () => {
    try {
      const res = await generateOtpMutation.mutateAsync(yourParams)
      // 处理成功逻辑
    } catch (err) {
      // 处理错误逻辑
    }
  }
  

• 检查mutationKey冲突
  如果你给当前useMutation配置了mutationKey，请确保页面内没有其他相同key的mutation实例，否则会出现状态互相覆盖的问题。

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