react-i18next中的UseTranslation返回null

Question

useTranslation()为i18n返回未定义的。我不明白为什么。我花了很多时间来调试这个问题。我将感谢你的帮助！

​

Answer 1

因为我还没有看到你的代码，抱歉，这可能是在摸索。

您需要导入一些文件，其中包含i18n的自定义内容和转换字符串。除非你是在Main中做的，否则你不能确定它在哪里。

即：translationUtils.js

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';

i18n.use(initReactI18next).init({

  lng: 'en',
  fallbackLng: 'en',

 resources: {
    en: {
      translation: {
        "myTranslationKey": "hello world"
      }
    }
  },

  keySeparator: false,
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

然后，您需要将其导入到您的文件中(屏幕截图中的文件)，即：

import './translationUtils';

然后你应该能够像这样使用它：

const {t} = useTranslation();

t("myTranslationKey", "default value");

您还需要确保您的react版本支持钩子。