i18n.changeLanguage 不是函数

Question

这是我的代码。

 import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';

function Page() {
  const { t, i18n } = useTranslation();

  const changeLanguage = lng => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="App">
      <div className="App-header">
        <button onClick={() => changeLanguage('de')}>de</button>
        <button onClick={() => changeLanguage('en')}>en</button>
      </div>
      <div>{t('test')}</div>
    </div>
  );
}

export default function App() {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Page />
    </Suspense>
  );
}

当我点击 de en 按钮时。我收到这个错误。类型错误：i18n.changeLanguage 不是函数。如何解决？

原文由 user12145676 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

看起来你还没有配置 i18next 。

您将需要创建一个文件 i18n.js 包含以下内容：

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

import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,

    interpolation: {
      escapeValue: false,
    }
  });
export default i18n;

然后将其导入您的 index.js ：

 import React, { Component } from "react";
import ReactDOM from "react-dom";
import App from './App';

import './i18n';

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

资源

原文由 Hamza El Aoutar 发布，翻译遵循 CC BY-SA 4.0 许可协议