React表单提交调用Ldap_connect触发Hook无效调用错误排查

问题重现 #

在React项目中，尝试获取表单的username和pass值，调用To_server.js中的Ldap_connect函数向服务器发送请求：

• 直接传入硬编码参数call_server.Ldap_connect('bob', 'zzzz')时函数运行正常
• 在表单提交的回调函数中传入formData参数call_server.Ldap_connect(formData.username, formData.pass)时，触发错误：Invalid hook call. Hooks can only be called inside of the body of a function component.

相关代码如下：

App.js #

import "./App.css";
import * as call_server from './To_server.js';
import Form from './Form';

function App() {
  console.log(call_server.Ldap_connect('bob', 'zzzz')) // work fine!

  const onChangeName = (formData) => {
    console.log(formData.username)  // return 'bob'
    console.log(formData.pass)      // return 'zzzz'
    console.log(call_server.Ldap_connect(formData.username, formData.pass)) // ** bug when submit! **
  };  

  return ( 
    <div className="App">
      <Form onSubmit={onChangeName}/>
    </div>     
  );
}

export default App

Form.js #

import React, { useState } from 'react';

function Form({ onSubmit }) {
    const [formData, setFormData] = useState({
        username: '',
        pass: '',
    });

    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setFormData({
            ...formData,
            [name]: value,
        });
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        onSubmit(formData); // Pass the form data to the parent component
    };

    return (
        <div className="container">
            <h1>Hello</h1>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    name="username"
                    placeholder="Username"
                    value={formData.username}
                    onChange={handleInputChange}
                />
                <input
                    type="text"
                    name="pass"
                    placeholder="Password"
                    value={formData.pass}
                    onChange={handleInputChange}
                />
             
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

export default Form;

To_server.js #

import { useState, useEffect } from 'react';


// *** get LDAP connect ***  
export function Ldap_connect(username, pass){
   const [data, setData] = useState(null)
  
   useEffect(() => {
      const fetchPost = async () => {
         const response = await fetch(
            `http://localhost:8000/ldap_connect?id=${username}&pass=${pass}`
         );
         const data = await response.json();         
         setData(data);
      };
      fetchPost();
   }, []);
   
   return (data)
}

错误原因 #

React Hook的核心规则：Hook（如useState、useEffect）只能在函数组件的顶层作用域或自定义Hook的顶层作用域中调用，不能在普通函数、回调函数、循环、条件判断中调用。

当前Ldap_connect是一个普通函数，却在内部使用了useState和useEffect：

• 硬编码调用时，它在App组件的顶层执行，符合Hook调用规则，所以能正常运行
• 表单提交时，它在onChangeName这个回调函数内部执行，违反了Hook调用规则，因此触发错误

此外，Ldap_connect的设计逻辑也存在问题：它试图通过Hook维护状态，但返回的data初始值为null，且无法实时更新请求结果（useEffect的依赖数组为空，只会执行一次）。

修正方案 #

方案1：将Ldap_connect改为普通异步函数 #

如果仅需要发送请求并获取返回数据，不需要在函数内部维护状态，直接将其改为标准的异步函数即可：

修改To_server.js：

// To_server.js
export async function Ldap_connect(username, pass) {
  try {
    const response = await fetch(
      `http://localhost:8000/ldap_connect?id=${username}&pass=${pass}`
    );
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error(`HTTP错误：${response.status}`);
    }
    const data = await response.json();         
    return data;
  } catch (error) {
    console.error('LDAP请求失败:', error);
    throw error; // 抛出错误让调用方处理
  }
}

修改App.js中的回调函数，使用async/await处理异步请求：

// App.js
const onChangeName = async (formData) => {
  console.log(formData.username);
  console.log(formData.pass);
  try {
    const data = await call_server.Ldap_connect(formData.username, formData.pass);
    console.log('请求结果:', data);
    // 这里可以处理返回的数据，比如更新组件状态
  } catch (error) {
    console.error('处理请求结果失败:', error);
  }
};

方案2：改为自定义Hook（需在组件中维护请求状态） #

如果需要在组件中管理请求的加载状态、错误状态或数据，可以将Ldap_connect改为符合规范的自定义Hook（命名必须以use开头）：

修改To_server.js：

// To_server.js
import { useState, useEffect } from 'react';

export function useLdapConnect(username, pass) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 如果没有传入用户名或密码，不执行请求
    if (!username || !pass) return;

    const fetchPost = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(
          `http://localhost:8000/ldap_connect?id=${username}&pass=${pass}`
        );
        if (!response.ok) throw new Error(`请求失败：${response.status}`);
        const responseData = await response.json();         
        setData(responseData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchPost();
  }, [username, pass]); // 依赖用户名和密码，变化时自动重新请求

  return { data, loading, error };
}

修改App.js，在组件顶层使用自定义Hook：

// App.js
import "./App.css";
import { useLdapConnect } from './To_server.js';
import Form from './Form';
import { useState } from 'react';

function App() {
  // 存储表单提交的凭证
  const [credentials, setCredentials] = useState({ username: '', pass: '' });
  // 使用自定义Hook获取请求状态和数据
  const { data, loading, error } = useLdapConnect(credentials.username, credentials.pass);

  const onChangeName = (formData) => {
    console.log(formData.username);
    console.log(formData.pass);
    // 更新凭证，触发Hook重新发送请求
    setCredentials(formData);
  };  

  return ( 
    <div className="App">
      {/* 显示请求状态 */}
      {loading && <p>正在验证...</p>}
      {error && <p className="error">验证失败：{error}</p>}
      {data && <p className="success">验证成功：{JSON.stringify(data)}</p>}
      
      <Form onSubmit={onChangeName}/>
    </div>     
  );
}

export default App

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