使用React+Next.js提交表单数据无响应问题求助

针对你遇到的表单提交无响应、控制台无日志的问题，可从以下几个方向排查修复：

1. 补全错误捕获逻辑 #

你的axios请求未添加错误捕获，即使请求失败或抛出异常，也不会在控制台输出信息。建议在handleSubmit中添加try-catch，覆盖同步和异步代码的错误捕获：

const handleSubmit = async (e) => {
  e.preventDefault();
  console.log("Om Success");
  const userData = {
    name: state.name,
    job: state.job
  };
  try {
    const response = await axios.post("https://xxxxxxx.com/api/users", userData);
    console.log(response.status);
    console.log(response.data);
  } catch (error) {
    // 打印完整错误信息，包括请求失败的原因
    console.error("表单提交失败:", error);
  }
};

2. 修复状态更新的闭包问题 #

当前handleChange中直接使用state进行状态更新，可能因React状态更新的异步性导致闭包问题，无法获取最新state值。改为函数式更新即可解决：

const handleChange = (e) => {
  console.log('Om Success')
  const value = e.target.value;
  setState(prevState => ({
    ...prevState,
    [e.target.name]: value
  }));
};

3. 验证事件触发情况 #

如果修改后仍无控制台输出，先简化handleSubmit，确认表单提交事件是否真的触发：

const handleSubmit = (e) => {
  e.preventDefault();
  alert("表单提交事件触发了");
  console.log("Om Success");
};

若alert也不弹出，检查：

• 按钮的type="submit"是否被其他代码覆盖
• 表单是否被隐藏或被其他元素遮挡，导致无法点击按钮
• 页面中是否有其他JS代码阻止了表单的默认提交行为

4. 检查控制台过滤设置 #

确保浏览器控制台未过滤错误信息：打开控制台的「Error」「Warning」标签，取消勾选「Hide network errors」类选项，查看是否有隐藏报错。

修改后的完整代码示例 #

import { useState } from "react";
import axios from "axios";

const Home = () => {
  const [state, setState] = useState({
    name: "",
    job: ""
  });

  const handleChange = (e) => {
    console.log('Om Success')
    const value = e.target.value;
    setState(prevState => ({
      ...prevState,
      [e.target.name]: value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    console.log("Om Success");
    const userData = {
      name: state.name,
      job: state.job
    };
    try {
      const response = await axios.post("https://xxxxxxx.com/api/users", userData);
      console.log(response.status);
      console.log(response.data);
    } catch (error) {
      console.error("表单提交失败:", error);
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <label htmlFor="name">
          Name
          <input
            type="text"
            name="name"
            value={state.name}
            onChange={handleChange}
          />
        </label>
        <label htmlFor="job">
          Job
          <input
            type="text"
            name="job"
            value={state.job}
            onChange={handleChange}
          />
        </label>
        <button type="submit">Register</button>
      </form>
    </>
  );
};

export default Home;

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