React自定义钩子封装问题：含event.preventDefault()的提交函数失效

常见问题分析 #

你的handleShowSubmit钩子仅执行到console.log('Level 1')就停止，大概率是以下原因之一：

• 逻辑未封装为可调用函数：直接在钩子顶层执行逻辑而非返回待触发的函数，导致仅在组件挂载/更新时执行一次，后续逻辑可能因条件判断提前终止。
• 闭包捕获了过期状态：钩子内的函数引用了组件/钩子内的状态，但未将这些状态加入依赖数组，导致函数使用旧值引发逻辑异常中断。
• 钩子结构错误：比如遗漏返回函数（但直接写在组件内正常，此可能性较低）。

正确的自定义钩子结构示例 #

假设你组件内正常工作的代码如下：

// 组件内可正常运行的代码
const handleShowSubmit = () => {
  console.log('Level 1');
  // 后续逻辑：修改状态、发起请求等
  setSomeState(prev => !prev);
  if (someCondition) {
    console.log('Level 2');
    // 更多业务逻辑...
  }
};

对应的正确自定义钩子需将逻辑封装为返回函数，并确保所有依赖项正确声明：

// useHandleShowSubmit.js
import { useCallback } from 'react';

export const useHandleShowSubmit = (someCondition, setSomeState) => {
  // 用useCallback保证函数引用稳定，避免不必要重渲染
  const handleShowSubmit = useCallback(() => {
    console.log('Level 1');
    // 完整复制组件内的业务逻辑
    setSomeState(prev => !prev);
    if (someCondition) {
      console.log('Level 2');
      // 剩余逻辑...
    }
  }, [someCondition, setSomeState]); // 所有外部依赖必须加入数组

  return handleShowSubmit;
};

在组件中使用钩子 #

import { useHandleShowSubmit } from './useHandleShowSubmit';

const YourComponent = () => {
  const [someState, setSomeState] = useState(false);
  const someCondition = true; // 示例业务条件

  // 传入钩子所需的依赖项
  const handleShowSubmit = useHandleShowSubmit(someCondition, setSomeState);

  return (
    <button onClick={handleShowSubmit}>Submit</button>
  );
};

关键注意事项 #

• 必须返回可调用函数：自定义钩子的核心是返回供组件触发的函数，而非直接执行逻辑。
• 依赖数组要完整：使用useCallback或useEffect时，函数内引用的所有外部变量、状态、函数都要加入依赖数组，避免闭包导致的过期数据问题。
• 避免顶层执行交互逻辑：钩子顶层代码会在组件每次渲染时执行，若逻辑需用户交互触发，必须封装在返回的函数内部。

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