React表单无法向后端API提交POST数据，请求排查前端代码问题

尝试通过React前端提交数据至Python后端API创建并存储用户，但提交后数据无法抵达指定API端点。使用POSTMAN测试时可成功创建用户，怀疑React代码存在问题。

前端React代码 #

function InputsSignUp(){
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    fetch('/api/user/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ email }),
    })
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error(error));
  };
  
    return (
        <>
              <Container fluid="sm" style={{backgroundColor: 'white'}}>
      <h1>{email}</h1>
      <h1>{password}</h1>
    <Form>
      <Form.Group className="mb-3" controlId="formBasicUsername">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="text" 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>


      <Button variant="primary" type="submit" onSubmit={handleSubmit}>
        Submit
      </Button>
      </Form>
      </Container>
        </>
    )
}

后端Python代码 #

@csrf_exempt
def signup(request):
    if request.method == 'POST':
        print("Hello")
        data = json.loads(request.body)
        user = User.objects.create(
            #username=data['username'],
            email=data['email'],
            password="hello",
        )
        user.save()
        return JsonResponse({'message': 'User created successfully'})

• 核心问题：表单提交事件绑定错误
  React代码中把onSubmit事件绑定在了<Button>组件上，但表单的提交事件应该绑定在<Form>组件上。当按钮type="submit"时，点击会触发<Form>的submit事件，而非按钮自身的事件。

  修改方式：将onSubmit={handleSubmit}从<Button>移到<Form>标签上：

  <Form onSubmit={handleSubmit}>
    // ... 表单原有内容
    <Button variant="primary" type="submit">
      Submit
    </Button>
  </Form>
  

• 额外检查点

  1. 确认前端请求URL /api/user/ 与后端路由配置完全一致，包括末尾的斜杠。
  2. 打开浏览器开发者工具（F12）的「网络」面板，查看提交请求的状态码和响应内容，排查是否存在404/500等错误。
  3. 若后续需要提交用户名和密码，需确保请求body包含对应数据：JSON.stringify({ username, email, password })。

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