在语言变更时，在控制台中出现Failed to fetch错误，但在刷新时工作正常。

Question

我需要你的帮助与react i18next changeLanguage的问题是，当我加载我的应用程序所选择的语言加载正确，当我改变它到其他语言，它抛出这样的东西在chrome控制台:-。

build.umd.js:335 i18next::backendConnector: loading namespace translation for language es failed TypeError: Failed to fetch

但如果我再次刷新，它加载的语言选择正确的不知道是什么问题，这里请看看我的文件下面，并提供您的见解。

这是我的配置和其他细节：-

我的i18n.js文件。

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
const languages = ['en', 'es', 'fr']

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' },
    fallbackLng: 'en',
    debug: true,
    whitelist: languages,

    interpolation: {
      escapeValue: false
    }
  })

export default i18n

我的localesestranslation.json文件:-。

{
    "common": {
        "buttons": {
            "save": "Salvar",
            "cancel": "Cancelar",
            "add": "Añadir"
        },
        "Table": {
            "tableName": "NOMBRE",
            "tableDescription": "DESCRIPCIÓN",
            "tableLastModified": "ÚLTIMA MODIFICACIÓN"
        },
        "search": "Buscar"
    },
    "features": {
        "Roles": {
            "name": "Nombre",
            "description": "Descripción",
            "permissions": "PERMISOS"
        }
    }
}

我的index.js文件：我的localesestranslation.json文件：-

import React, { Suspense } from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import configureStore from './app/configureStore'
import App from './app/App'
import './app/i18n'

const ReduxStore = configureStore()

ReactDOM.render(
  <Provider store={ReduxStore}>
    <Suspense fallback={<div>Loading...............</div>}>
      <App />
    </Suspense>
  </Provider>,
  document.getElementById('root')
)

我的组件文件，在这里我使用了翻译功能:-。

import React from 'react'
import { withTranslation } from 'react-i18next'

export class Roles extends React.Component<any, any> {
  constructor(props: any) {
    super(props)
  }

  render() {
    const { t, i18n } = this.props
     return (
       <React.Fragment>
          <div>
            <label htmlFor="locale">Choose a Language:</label>
            <select onChange={(evt: any) => i18n.changeLanguage(evt.target.value)}>
              <option
                value="en"
                selected={window.localStorage.getItem('i18nextLng') === 'en' ? true : false}
              >
                English
              </option>
              <option
                value="es"
                selected={window.localStorage.getItem('i18nextLng') === 'es' ? true : false}
              >
                Spanish
              </option>
              <option
                value="fr"
                selected={window.localStorage.getItem('i18nextLng') === 'fr' ? true : false}
              >
                French
              </option>
            </select>
          </div>
        </React.Fragment>

请花点时间，提供一些你的见解或建议，欢迎。谢谢你

Answer 1

我发现了这个问题，因为它是由于无效的SSL证书，它阻止了网络选项卡中的翻译要求，所以，我在当局中添加了证书，然后它的所有工作正常。