在普通函数中使用React Hooks触发无效调用错误，如何解决？

你的loginCheck是普通函数，但在里面直接调用了useDispatch和useSelector这两个React Hooks，违反了React的Hook规则——只有函数组件的顶层代码，或是以use开头的自定义Hook函数内，才能调用Hook。

你提到的“钩子可在普通函数中使用”是误解，React允许的是在**自定义Hook（必须以use命名）**中调用其他Hook，这类函数是专门用来复用Hook逻辑的，并非普通函数。

修复步骤： #

1. 把函数名改为useLoginCheck，符合自定义Hook的命名规范（必须以use开头）
2. 函数逻辑保持不变，自定义Hook内部可以正常调用其他Hook

修改后的代码：

export function useLoginCheck() {
  const dispatch = useDispatch();
  const user = useSelector((store) => store.user.currentUser);

  !user && dispatch(showLoginPrompt());
}

调用方式： #

在函数组件顶层直接调用即可：

import { useLoginCheck } from './misc.js';

function SomeComponent() {
  useLoginCheck(); // 在组件顶层调用，符合Hook规则

  return (
    // 组件内容
  );
}

这样就能解决Invalid hook call的错误，同时实现跨组件复用登录检查的逻辑。

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