React Query useMutation GET请求首次提交返回undefined问题

开发搜索组件时，指定请求名称后需要立即获取并展示响应结果。使用React Query的useMutation钩子、react-hook-form的useForm、axios及MUI框架，遇到首次提交输入后响应返回undefined，第二次提交才能得到正确结果的问题。

问题相关代码 #

hook useMutation（profile.mutation.ts） #

import { getUsersList } from '@/services/profileService/profileService'
import { IGetUsersList } from '@/services/types'

const profileConfig = {
  getUsersList: {
    key: 'getUsersList',
    request: async (pageable: IGetUsersList) => {
      const response = await getUsersList(pageable)
      return response.data
    },
  },
}

export const useGetUsersListMutation = () => {
  const { getUsersList: config } = profileConfig
  const state = useMutation(config.request, {
    retry: 10,
    retryDelay: 1000,
    onError(error) {
      console.log('search error', error)
    },
  })
  return state
}

存在问题的Search.tsx组件 #

import React from 'react'
import InnerSearch from '@/components/search/InnerSearch'
import SettingsSVG from '@/assets/icons/Settings.svg'
import { Box, Container } from '@mui/material'
import { IGetUsersList } from '@/services/types'
import { useForm } from 'react-hook-form'
import { useGetUsersListMutation } from '@/query/profile/profile.mutation'

const Search = () => {
  const { register, handleSubmit } = useForm<IGetUsersList>();
  const { mutateAsync: mutateGetUsersList, isSuccess, data: resData } = useGetUsersListMutation();

  const onSubmit = (requestData: IGetUsersList) => {

    console.log(requestData); //Object { username: "A" }   always no problem

    mutateGetUsersList(requestData)

    console.log('isSuccess', isSuccess); //on first submit: isSuccess false, on second submit: isSuccess true

    console.log('resData', resData); //on first submit: resData undefined, on second submit: resData 'right request'

  };

  return (
    <Container disableGutters sx={{ padding: '0px 10px 0px 10px', }} >
      <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 4 }}>
        <InnerSearch register={register}
          handleSubmit={handleSubmit}
          onSubmit={onSubmit} />
        <SettingsSVG />
      </Box>
    </Container>
  )
}

export default Search

(InnerSearch组件包含输入框和提交按钮)

尝试过的解决方法 #

• 将onSubmit函数改为async/await形式；
• 在mutation中配置retry: 10, retryDelay: 1000；
• 用useState定义userlistArray，通过mutateGetUsersList(requestData).then((res)=>{setUserlistArray(res)})设置state，但then内打印正确结果，userlistArray仍为undefined，第二次提交才正常。

最终解决代码 #

import React, { useState, useEffect } from 'react'
import InnerSearch from '@/components/search/InnerSearch'
import SettingsSVG from '@/assets/icons/Settings.svg'
import { Box, Container } from '@mui/material'
import { IGetUsersList } from '@/services/types'
import { useForm } from 'react-hook-form'
import { useGetUsersListMutation } from '@/query/profile/profile.mutation'

const Search = () => {
  const [userlistArray, setUserlistArray] = useState([])

  const { register, handleSubmit } = useForm<IGetUsersList>();
  const { mutateAsync: mutateGetUsersList, data: resData } = useGetUsersListMutation();

  const onSubmit = (requestData: IGetUsersList) => {
    mutateGetUsersList(requestData)
  };

  useEffect(()=>{
        setUserlistArray(resData && resData.content);
    }, [resData])


  console.log('userlistArray____', userlistArray); //now it's work!

  return (
    <Container disableGutters sx={{ padding: '0px 10px 0px 10px', }} >
      <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 4 }}>
        <InnerSearch register={register}
          handleSubmit={handleSubmit}
          onSubmit={onSubmit} />
        <SettingsSVG />
      </Box>
    </Container>
  )
}

export default Search

内容的提问来源于stack exchange，提问作者NaN-Simon