React提示Invalid hook call，Hook在函数体内调用仍报错如何解决？

你遇到的报错属于官方给出的第二种情况：违反了Hooks调用规则。

React Hooks 只能在两个场景下调用：

• React 函数组件的顶层作用域
• 自定义 Hook 的顶层作用域

你代码中的 useTranslation 调用位置是 Redux Thunk 的异步回调函数内部，该函数属于普通的业务逻辑函数，不在 React 组件的渲染生命周期执行上下文内，完全不满足 Hook 的调用条件，因此触发报错。

方案一：从调用侧传入翻译函数 #

你调用createMail这个Thunk的位置必然处于React函数组件或者自定义Hook中，可在调用侧先调用useTranslation获取t函数，再作为参数传入Thunk：

// 调用thunk的组件/自定义Hook内部代码
const { t } = useTranslation(["emails", "translation"]);
// 触发thunk时传入t
dispatch(createMail(formValues, t));

对应修改Thunk的定义：

export const createMail =
  (values: ValuesType, t: TFunction): AppThunk =>
  async (dispatch, getState) => {
    const state = getState();
    // 直接使用传入的t函数完成翻译
    const successTip = t('emails:create_success');
  };

方案二：直接调用i18n原生API #

不需要使用Hook版本的翻译能力，直接引入i18n实例调用其t方法即可，无需依赖React的执行上下文：

// 引入你项目中初始化完成的i18n实例
import i18n from '@/config/i18n';

export const createMail =
  (values: ValuesType): AppThunk =>
  async (dispatch, getState) => {
    const state = getState();
    const t = i18n.t;
    // 后续正常使用t即可
  };

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