Javascript i18n.changeLanguage不是一个函数

这是我的密码

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>
  );
}

import React，{suspend}来自'React'；
从“react-i18next”导入{useTranslation}；
功能页（）{
const{t，i18n}=useTranslation（）；
const changeLanguage=lng=>{
i18n.变更语言（lng）；
};
返回(
changeLanguage（'de'）}>de
changeLanguage（'en'）}>en
{t（'test'）}
);
}
导出默认函数App（）{
返回(
);
}

---

当我点击

de en

按钮时。我得到这个错误。TypeError:i18n.changeLanguage不是函数。如何修复？

尝试在onClick输入事件中使用

（）=>changeLanguage（'en'）.bind（此）

---

这可以解决您的问题。

看起来您还没有配置

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")
);

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“./App”导入应用程序；
导入“./i18n”；
ReactDOM.render(
a）像上面的代码一样移动changeLanguage-但也从“../i18n”导入i18n；或者定义i18n实例的位置

import i18n from 'i18n';

// define the function outside of component scope
const changeLanguage = (lng) => {
  i18n.changeLanguage(lng);
};

b） 或以下步骤：

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

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

  const toggle = lng => i18n.changeLanguage(lng); 
  if (this.props.event){

   return (
    <div className="App">
      <div className="App-header">
        <button onClick={() => toggle(this.props.event)}>de</button>
        <button onClick={() => toggle(this.props.event)}>en</button>
      </div>
      <div>{t('test')}</div>
    </div>
   );
  }
 }

import React，{suspend}来自'React'；
从“react-i18next”导入{useTranslation}；
功能页（）{
const{t，i18n}=useTranslation（）；
const toggle=lng=>i18n.changeLanguage（lng）；
如果（此.props.event）{
返回(
切换（this.props.event）}>de
切换（this.props.event）}>en
{t（'test'）}
);
}
}
Hi，您是否尝试从“i18next”导入i18n

？你能分享你的

i18n.js

文件（一个带有i18n配置的文件）？@rcoro为什么我需要从“i18next”导入i18n？@ElAoutarHamza i18n配置在哪里？看起来我做的一切都很好，但它不工作。它正在工作，函数

changeLanguage

现在可用，您可以调用它。我不明白。我显示了我的坏代码。您是说它可以工作吗？可以在我的代码上显示我应该如何使用changeLanguage吗？我收到一个警告。i18next:languageChanged ru..i18next:：translator:missingKey ru translation test。这是因为您需要添加翻译文件，或者设置后端以便它为您提供翻译，请检查以下内容：