React Hooks表单提交问题排查：网络错误、e.preventDefault()报错及结果数据无法打印

嘿，我来帮你一步步解决这些表单提交的问题！先直接回答你的核心疑问，再逐个拆解每个问题的原因和修复方法。

一、是否需要使用e.preventDefault()？ #

必须要用！ 浏览器默认的表单提交行为会直接刷新整个页面，这会导致你的React组件重新挂载，丢失当前的输入状态，还会中断正在进行的异步请求。你之前报错是因为在useEffect里直接调用了onSubmitting——这个函数是为表单提交事件设计的，只有用户点击提交按钮时，浏览器才会传入合法的事件对象e，挂载时调用它自然拿不到e，所以才会出现Cannot read property 'preventDefault' of undefined的错误。

二、逐个解决你的问题 #

1. 修复e.preventDefault()的报错 #

问题根源在useEffect里的自动调用：你设置了组件挂载时就执行onSubmitting()，但这个函数本来就该是用户主动提交表单时才触发的。直接移除这段useEffect代码就好，除非你有特殊需求要在页面加载时自动提交表单（显然你不需要，因为用户得先填内容）。

2. 解决网络错误ERR_EMPTY_RESPONSE #

这个错误说明你的后端接口http://localhost:5000/app/signup没有返回任何响应内容，大概率是这两个原因：

• 之前的useEffect在组件挂载时就发起了POST请求，此时所有表单字段都是undefined，后端接收到无效数据后处理出错，没有生成任何响应。
• 后端接口本身存在bug，比如处理请求时抛出异常但没有正确捕获，导致无法返回合法的响应。

建议先直接用Postman或curl测试后端接口，手动传入合法的用户数据，看看能不能得到正常响应。如果后端没问题，那前端修复后（移除自动提交、确保提交时带有效数据）就能解决这个问题。

3. 无法打印result.data的问题 #

你的try-catch位置错了！await axios.post()如果请求失败会直接抛出异常，但你把它放在了try块外面，所以异常根本没被捕获，代码直接中断，自然执行不到console.log(result.data)。

正确的做法是把整个请求逻辑都放进try块里，这样请求成功时处理响应，失败时进入catch块捕获错误。

三、修正后的完整代码 #

我还优化了一些细节，比如把表单改成受控组件（添加value绑定）、给useState设初始空字符串、把邮箱输入框改成type="email"，这些都是React表单的最佳实践：

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import axios from "axios";

const AnotherForm = () => {
  // 给状态设置初始空字符串，避免undefined
  const [fullName, setName] = useState("");
  const [userName, setUserName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const onSubmitting = async (e) => {
    e.preventDefault(); // 现在只有表单提交时调用，有合法的e对象，不会报错
    try {
      const UserDetails = { fullName, userName, email, password };
      const result = await axios.post(
        "http://localhost:5000/app/signup",
        UserDetails
      );
      console.log("接口返回数据:", result.data);
      console.log("完整响应:", result);
    } catch (error) {
      console.error("提交失败:", error); // 捕获并打印错误信息
    }
  };

  // 移除不必要的自动提交逻辑
  // useEffect(() => {
  //   onSubmitting();
  // }, []);

  return (
    <div className="form-div">
      <form onSubmit={onSubmitting}>
        <input
          type="text"
          placeholder="Full Name"
          onChange={(e) => setName(e.target.value)}
          className="form-control form-group"
          value={fullName} // 受控组件绑定
        />
        <input
          type="text"
          placeholder="User name"
          onChange={(e) => setUserName(e.target.value)}
          className="form-control form-group"
          value={userName} // 受控组件绑定
        />
        <input
          type="email" // 用email类型，浏览器会做基础校验
          placeholder="Email"
          onChange={(e) => setEmail(e.target.value)}
          className="form-control form-group"
          value={email} // 受控组件绑定
        />
        <input
          type="password"
          placeholder="Password"
          onChange={(e) => setPassword(e.target.value)}
          className="form-control form-group"
          value={password} // 受控组件绑定
        />
        <input type="submit" value="Submit" className="btn btn-danger btn-block" />
      </form>
    </div>
  );
};

export default AnotherForm;

额外小贴士 #

• 受控组件的value绑定能让你更精准地控制表单状态，避免出现输入和状态不一致的问题。
• 测试后端接口时，一定要确认它能返回合法的JSON响应，哪怕是错误情况（比如用户名已存在），也应该返回对应的状态码和错误信息，而不是空响应。
• 如果后端是跨域的，记得在后端配置CORS，避免出现跨域错误（不过你现在的错误是ERR_EMPTY_RESPONSE，暂时不用优先考虑这个）。

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