React表单提交后重定向报错：类组件转函数组件并保留状态的实现方案

这个报错的核心原因很明确：useNavigate是React Router的Hook，它只能在函数组件的顶层作用域中调用，既不能在类组件里使用，也不能像你那样在异步回调（then里面）嵌套调用。下面我给你完整的改写方案，把类组件转成函数组件，同时保留所有原有功能并实现跳转：

改写后的完整代码 #

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import { useNavigate } from 'react-router-dom';
import postData from './APIREQ';

// 转为函数组件
const Signup = () => {
  // 用useState替代类组件的state
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  // 在组件顶层调用useNavigate，获取navigate函数
  const navigate = useNavigate();

  const onSubmit = (e) => {
    e.preventDefault();
    console.log(email);
    console.log(password);
    postData('http://localhost:5000/users', { email, password })
      .then(data => {
        console.log(data);
        // 直接调用提前获取的navigate函数
        navigate('/');
      })
      .catch(err => {
        // 建议加上错误处理，避免请求失败时无提示
        console.error('注册失败:', err);
      });
  }

  return (
    <div className="container">
      <Form onSubmit={onSubmit}> {/* 这里可以把onSubmit绑定在Form上，更符合表单语义 */}
        <Form.Group className="mb-3" controlId="formBasicEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control 
            type="email" 
            placeholder="Enter email" 
            value={email} 
            onChange={e => setEmail(e.target.value)}
          />
          <Form.Text className="text-muted">
            We'll never share your email with anyone else.
          </Form.Text>
        </Form.Group>

        <Form.Group className="mb-3" controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control 
            type="password" 
            placeholder="Password" 
            value={password} 
            onChange={e => setPassword(e.target.value)}
          />
        </Form.Group>

        <Form.Group className="mb-3" controlId="formBasicCheckbox">
          <Form.Check type="checkbox" label="Check me out" />
        </Form.Group>

        <Button variant="primary" type="submit">
          Submit
        </Button>
      </Form>
    </div>
  );
}

export default Signup;

关键改动说明 #

1. 组件类型转换：把class Signup extends Component改成函数式组件const Signup = () => {}
2. 状态管理替换：用useState钩子替代类组件的this.state，每个状态字段单独声明（也可以合并成一个对象，分开写更直观）
3. 正确使用useNavigate：在函数组件的顶层调用useNavigate()获取跳转函数，而不是在异步回调里调用——这完全符合Hook的使用规则
4. 表单提交优化：把onClick绑定在Button上改成绑定在Form标签的onSubmit属性，更符合HTML表单的原生行为

另外建议加上.catch处理请求失败的情况，这样用户注册出错时你能看到错误信息，也可以给用户显示提示。

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