React+Express项目表单提交触发Invalid Hook Call错误求助

问题场景 #

开发前后端分离表单处理项目：

• 前端：React函数组件，实现数据展示与表单提交
• 后端：Express.js + MongoDB，提供GET/POST接口
• 现状：页面加载时GET请求正常获取展示数据；点击提交按钮触发POST时抛出Hook错误，Postman调用后端POST接口可正常插入数据。

错误日志 #

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
    at Object.throwInvalidHookError (react-dom.development.js:16227:9)
    at useEffect (react.development.js:1634:21)
    at handlesubmit (App.jsx:29:5)

问题根源 #

错误核心是在事件处理函数handlesubmit内部嵌套调用了useEffect，违反React Hooks规则：Hooks必须在函数组件的顶层作用域调用，不能嵌套在普通函数、条件判断、循环等代码块内。

修正方案 #

1. 移除handlesubmit中的useEffect，直接在函数内发起POST请求
2. 提交成功后重新调用GET接口，更新页面数据列表（实现实时刷新）

修正后的前端React代码 #

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

function App() {
  const [name, setName] = useState("zain");
  const [rank, setRank] = useState("5");
  const [country, setCountry] = useState("india");
  const [dob, setDOB] = useState("2023-02-21");
  const [totalrun, setRun] = useState("5000");
  const [cricketers, setCricketers] = useState([]);

  const baseURL = "http://localhost:3010/cricketers";

  // 页面加载时获取数据
  useEffect(() => {
    fetchCricketers();
  }, []);

  // 封装GET请求函数，方便复用
  const fetchCricketers = () => {
    axios.get(baseURL).then((response) => {
      setCricketers(response.data);
    });
  };

  const handlesubmit = () => {
    const collection1 = {
      Name: name,
      Country: country,
      DOB: dob,
      TotalRun: totalrun,
      Rank: rank,
    };

    // 直接发起POST请求，无需嵌套useEffect
    axios
      .post(baseURL, collection1)
      .then(function (response) {
        console.log(response);
        // 提交成功后重新获取数据，更新列表
        fetchCricketers();
      })
      .catch(function (error) {
        console.log(error);
      });
  };

  return (
    <div>
      <label>Cricketer Rank:</label>
      <input
        type="number"
        name="Rank"
        value={rank}
        onChange={(e) => setRank(e.target.value)}
      />
      <br />
      <label>Cricketer Name:</label>
      <input
        type="text"
        name="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <br />
      <label>Cricketer Country:</label>
      <input
        type="text"
        name="Country"
        value={country}
        onChange={(e) => setCountry(e.target.value)}
      />
      <br />
      <label>Cricketer DOB:</label>
      <input
        type="date"
        name="DOB"
        value={dob}
        onChange={(e) => setDOB(e.target.value)}
      />
      <br />
      <label>Cricketer TotalRun:</label>
      <input
        type="number"
        name="TotalRun"
        value={totalrun}
        onChange={(e) => setRun(e.target.value)}
      />
      <br />
      <button onClick={handlesubmit}>Submit</button>
      <ul>
        {cricketers.map((i) => (
          <li key={i._id}>
            <p>
              {i.name} | {i.country} | Rank: {i.rank} | DOB: {new Date(i.dob).toLocaleDateString()} | Total Runs: {i.totalRun}
            </p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

额外优化说明 #

• 封装fetchCricketers函数，复用GET请求逻辑，避免代码重复
• 渲染列表时修正了totalrun字段名（后端Schema定义为totalRun，需保持一致）
• 对日期字段做了格式化处理，提升可读性

后端代码说明 #

后端Express代码无需修改，Postman可正常调用接口说明后端逻辑无问题。

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