React按钮提交触发Invalid hook call错误的解决方案

错误原因 #

你触发的Invalid hook call错误，核心原因是违反了React Hooks的规则：useEffect作为Hook，必须直接在函数组件的顶层作用域调用，不能放在事件处理函数（比如handleSubmit）、条件判断或嵌套函数内部。

修正方案 #

直接移除useEffect，将异步请求逻辑直接写在handleSubmit函数中即可，因为按钮点击是事件触发的交互，不需要依赖useEffect的副作用触发机制。

修正后的代码 #

const handleSubmit = async (e) => {
  // 若按钮属于表单，阻止默认提交跳转行为
  e.preventDefault();
  
  if (local_id != null) {
    try {
      let res = await getProtectedAsset(
        "http://127.0.0.1:5002/change_settings",
        user,
        setUser,
        "testdata"
      );

      console.log(res.data);
    } catch (error) {
      console.error(error.message);
    }
  }
};

关键说明 #

• 给handleSubmit添加async关键字，匹配内部await调用异步函数的需求
• 如果按钮是表单内的提交按钮，e.preventDefault()可避免浏览器默认的页面跳转行为
• 移除多余的useEffect后，直接在点击事件中执行异步请求，完全符合React的使用规则

内容的提问来源于stack exchange，提问作者J. Doe