React中辅助函数调用Redux Dispatch触发Hook错误，求解决方案

问题背景 #

在多个组件中重复执行Redux Dispatch逻辑，尝试封装成普通辅助函数复用时，触发错误：

react-dom.development.js:16227 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

错误原因 #

useDispatch和useNavigate都是React Hook，必须遵循Hook规则：只能在函数组件的顶层或自定义Hook的顶层调用，不能在普通函数、事件回调这类非Hook/组件顶层的位置调用。你原来的helperCall是普通函数，直接在内部调用Hook，违反了这一规则。

正确解决方案：封装为自定义Hook #

将逻辑封装成自定义Hook，自定义Hook允许内部调用其他Hook，然后在组件中使用该Hook获取处理函数，再绑定到事件上。

修改后的自定义Hook代码 #

import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { loadASearchResults, updateASearchTerm } from '../../redux/actionsReducers/AResults';
import { loadBSearchResults, updateBSearchTerm } from '../../redux/actionsReducers/BResults';
import { loadCSearchResults, updateCSearchTerm } from '../../redux/actionsReducers/CResults';

// 自定义Hook，命名以use开头（React Hook规范）
export function useSearchHandler() {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  // 返回处理函数，包含原业务逻辑
  return function handleSearch(e, searchText, searchType) {
    e.preventDefault();
    e.stopPropagation();

    if (!searchText || searchText === '-' || searchText.toLowerCase() === 'not listed') {
      return;
    }

    // 修正原代码变量名错误：searchTerm改为传入的searchText
    const searchTerm = searchText;
    if (searchType === 'a') {
      dispatch(updateASearchTerm({ searchTerm, searchType }));
      dispatch(loadASearchResults({ searchTerm, searchType }));
      navigate('/page-a');
    } else if (searchType === 'b') {
      dispatch(updateBSearchTerm({ searchTerm, searchType }));
      dispatch(loadBSearchResults({ searchTerm, searchType }));
      navigate('/page-b');
    } else if (searchType === 'c') {
      dispatch(updateCSearchTerm({ searchTerm, searchType }));
      dispatch(loadCSearchResults({ searchTerm, searchType }));
      navigate('/page-c');
    }
  };
}

修改后的组件代码 #

...imports...    
import { useSearchHandler } from '../../assets/helperFunctions/useSearchHandler';

export default function CompExamp() {
  ...variables...
  
  // 在组件顶层调用自定义Hook，获取处理函数
  const handleSearch = useSearchHandler();

  return (
    <div className="min-w-0 flex-1"
      onClick={(e) => handleSearch(e, searchText, searchType)}
    >
      <span className="absolute inset-0" aria-hidden="true" />
      <p className="text-sm font-medium text-black">Target</p>
      <p className="text-base text-gray-700">test</p>
    </div>
  )
}

关键说明 #

• 自定义Hook必须以use开头，这是React识别Hook的约定。
• 在组件顶层调用自定义Hook，确保Hook的调用顺序稳定（Hook规则核心要求）。
• 处理函数内部不再直接调用Hook，而是使用自定义Hook中提前获取的dispatch和navigate，完全符合Hook规则。

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