使用react-query点击提交表单后返回值为undefined的问题排查

核心问题根源 #

你之前用useQuery处理POST请求是错误的——useQuery是专门为读取/查询数据设计的，POST这类修改数据的操作应该用React Query的useMutation钩子，这也是你点击后返回undefined的主要原因。

解决方案步骤 #

1. 重构自定义usePost钩子，改用useMutation

替换原来基于useQuery的实现，用useMutation处理POST请求：

import { useMutation } from '@tanstack/react-query';
import axios from 'axios';

// 自定义POST请求钩子，基于useMutation
const usePost = (url) => {
  return useMutation({
    mutationFn: (requestData) => axios.post(url, requestData),
  });
};

2. 在注册组件中使用钩子处理表单提交、响应与跳转

结合React Router的useNavigate，在请求成功后提取响应数据并跳转：

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { usePost } from './usePost';

const RegisterForm = () => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();
  // 获取mutation相关方法与状态
  const { mutate, isLoading, error } = usePost('/auth/register');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 触发POST请求，传入表单数据
    mutate(
      { username, email, password },
      {
        // 请求成功回调：提取响应数据并跳转
        onSuccess: (response) => {
          const { email, id } = response.data;
          // 跳转到验证页面，通过state传递数据
          navigate('/verify-account', { state: { email, id } });
        },
        // 请求失败回调：处理错误
        onError: (err) => {
          console.error('注册失败:', err.response?.data || err.message);
          // 可在此添加前端错误提示，比如显示错误信息
        },
      }
    );
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="用户名"
        required
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="邮箱"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="密码"
        required
      />
      <button type="submit" disabled={isLoading}>
        {isLoading ? '注册中...' : '注册'}
      </button>
      {error && <p style={{ color: 'red' }}>注册失败，请检查信息后重试</p>}
    </form>
  );
};

export default RegisterForm;

3. 在验证页面接收传递的数据

用React Router的useLocation获取跳转时携带的参数：

import { useLocation } from 'react-router-dom';

const VerifyAccount = () => {
  const location = useLocation();
  // 提取传递的email和ID，做容错处理
  const { email, id } = location.state || {};

  return (
    <div>
      <h2>验证你的账户</h2>
      {email ? (
        <p>我们已向邮箱 <em>{email}</em> 发送了验证邮件，请输入验证码完成验证</p>
      ) : (
        <p>无法获取账户信息，请返回注册页面重试</p>
      )}
      {/* 这里添加验证码输入框与验证逻辑，使用id和email接口请求 */}
    </div>
  );
};

export default VerifyAccount;

关键说明 #

• useMutation天生适合处理POST/PUT/DELETE这类写操作，提供明确的onSuccess/onError回调，能直接获取请求响应结果，不需要依赖enabled参数控制触发时机，直接通过mutate函数手动触发。
• 跳转时用React Router的state传递数据，比URL参数更安全，不会暴露敏感信息（如用户ID）。

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