React中在onSubmit调用自定义Hook报错求助

问题描述 #

我是React新手，尝试创建useMail自定义Hook并在表单onSubmit事件中调用，但触发了ESLint错误。试过移除Hook名称里的“use”，但问题没解决，求帮助。

代码片段 #

onSubmit函数代码 #

const onSubmit = ( event ) => {
    event.preventDefault();
    setFormSubmited( true );
    if( !isFormValid ) return;
    
    const { send, setMessageuseMail } = useMail(); 
}

useMail Hook代码 #

import { useState } from "react"

export const useMail = () => {
    const [send, setSend] = useState(false);
    const [messageMail, setMessageMail] = useState();

    setSend( true );
    setMessageMail(' Pruebas ');

    return {
        send,
        messageMail
    }
}

错误信息 #

ERROR
[eslint]
src\components\ContactUs.jsx
Line 43:45: React Hook "useMail" is called in function "onSubmit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks

解决步骤 #

1. 遵守React Hook核心规则 #

React Hook明确要求：只能在组件顶层或自定义Hook内部调用Hook，不能在事件处理、循环、条件判断等嵌套逻辑里调用。你在onSubmit事件处理函数里调用useMail，直接违反了这条规则，所以ESLint报错。

2. 调整Hook的使用位置 #

把useMail的调用移到组件函数的顶层，而非onSubmit内部：

// 组件函数顶层，所有嵌套函数之外
const { send, messageMail, sendMail } = useMail();

const onSubmit = ( event ) => {
    event.preventDefault();
    setFormSubmited( true );
    if( !isFormValid ) return;
    
    // 这里直接使用Hook返回的方法或状态
}

3. 修复useMail Hook的逻辑问题 #

你的useMail里直接调用setSend和setMessageMail，会导致每次组件渲染时都触发状态更新，进而引发无限重渲染。需要把这些逻辑封装成可调用的方法：

import { useState } from "react"

export const useMail = () => {
    const [send, setSend] = useState(false);
    const [messageMail, setMessageMail] = useState('');

    // 封装邮件发送逻辑为方法
    const sendMail = () => {
        setSend(true);
        setMessageMail('Pruebas');
    };

    return {
        send,
        messageMail,
        sendMail // 返回方法供外部调用
    }
}

4. 在onSubmit中调用Hook返回的方法 #

现在可以在onSubmit里安全调用Hook提供的sendMail方法：

const { send, messageMail, sendMail } = useMail();

const onSubmit = ( event ) => {
    event.preventDefault();
    setFormSubmited( true );
    if( !isFormValid ) return;
    
    sendMail(); // 触发邮件发送逻辑
}

这样既解决了ESLint的规则报错，也修复了Hook本身的无限重渲染问题。

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