i18n.changeLanguage не является функцией - PullRequest
Новая
       9

i18n.changeLanguage не является функцией

0 голосов
/ 01 октября 2019

Это мой код. 

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 не является функцией. Как исправить?

Ответы [ 3 ]

0 голосов
/ 01 октября 2019

Похоже, вы не настроили 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")
);

источник

0 голосов
/ 01 октября 2019

а) переместить 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>
   );
  }
 }
0 голосов
/ 01 октября 2019

Попробуйте использовать внутри событий ввода onClick 

() => changeLanguage('en').bind(this)

Это может решить вашу проблему.

...