i18next React -更改语言仅在浏览器刷新后有效

Question

在我的React页面上，更改语言仅在浏览器刷新后有效。我尝试了以前帖子中所有可能的建议，但一无所获。它只对App.js组件上的字符串工作。谢谢你的帮助。

这是我的i18n.js文件

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
const resources = {
    'en': {translation: require('./translations/en.json')},
    'th': {translation: require('./translations/th.json')},
    'pt': {translation: require('./translations/pt.json')},
}
i18n
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    debug: true,
    fallbackLng: 'en',
    // lng: 'th',
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    resources
  });
export default i18n;

我的更改语言函数是这样的:

 handleLanguageChange = (item) => {
    i18n.changeLanguage(item.key, () => console.log('lanh1', i18next.language))
    // this.forceUpdate()
  }

导入App.js文件:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import rootReducer from './store/reducers/rootReducer';
import thunk from 'redux-thunk';
import { applyMiddleware, createStore } from 'redux';
import { Provider } from 'react-redux';
import './i18n';
const store = createStore(rootReducer, applyMiddleware(thunk));
ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);
reportWebVitals();

，这里是我如何渲染翻译:

import React, { Component } from 'react';
import { Navigate} from "react-router-dom";
import { Button, Container, Grid } from '@mui/material';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { setCurRoute } from '../../store/actions/authAction';
import Background from '../../img/header-img.jpg';
import i18next from 'i18next';
// import i18n from '../../i18n';
class LandingPage extends Component {
  render() {
    return (
        <div
          style={{
          backgroundImage: `url(${Background})`,
          backgroundPosition: 'center',
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat'
          }}
        >
          <h1 style={{textAlign: 'center'}}>{i18next.t('headline_one_one')}<br />{i18next.t('headline_one_two')}</h1>
          <h4 style={{textAlign: 'center', lineHeight: 2, border: '2'}}>
            {i18next.t('headline_two')}
          </h4>
        </div>
    );
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(LandingPage)

Answer 1

在react中，尝试使用useTranslation钩子或withTranslation HOC。这将检测语言的变化。

Answer 2

由于NextJs的预渲染是静态生成或服务器端渲染的网页的html，我们不能使用i18n.changeLanguage像在一个"正常的";我们必须像这样使用下一个路由器:

import {useRouter} from "next/router";
const router = useRouter();
function changeLang(locale:string):void {
  router.push({
    route: router.route,
    query: router.query
  }, router.asPath, { locale });
}
changeLang("en");

Answer 3

如果它是一个类组件，试试这个:

 componentDidUpdate(prevProps, prevState) {
    if (this.props.t !== prevProps.t) {
      console.log(this.props.i18n.language);
    }
  }