next-i18next Страница перезагрузки, похоже, нарушила язык. Ключи Dynami c? - PullRequest
Новая
       59

next-i18next Страница перезагрузки, похоже, нарушила язык. Ключи Dynami c?

1 голос
/ 07 мая 2020

Я следовал руководству .. это мое приложение. js и мой индекс. js

Индекс. js

import { withTranslation } from '../i18n'
class Index extends React.Component {

  static async getInitialProps (params) {
    const { store, isServer, req, query } = params;
    if (isServer) {
      await store.dispatch(restoreStatus(req));   
      await store.dispatch(restoreBasicSettings(req));  
      await store.dispatch(restoreSNMPSettings(req));    
      await store.dispatch(restoreSIPSettings(req));  
      await store.dispatch(restoreHardwareSettings(req)); 
      await store.dispatch(restoreAdvancedSettings(req));  
    }
  }

  render () {
    return (
      <Layout>
        <MainPage />
      </Layout>
    )
  }
}

_app. js 


export default withTranslation('common')(Index)

import React from 'react'
import { Provider } from "react-redux";
import App, { Container } from "next/app";
import withRedux from "next-redux-wrapper";
import { initStore } from '../statemanagement/store'
import '../styles/index.css'

import { appWithTranslation } from '../i18n'

export default withRedux(initStore, {debug: false})(appWithTranslation(class MyApp extends App {

    static async getInitialProps({Component, ctx}) {
        return {
            pageProps: {
                // Call page-level getInitialProps
                ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
            }
        };
    }

    render() {
        const {Component, pageProps, store} = this.props;
        return (
            <Container>
                <Provider store={store}>
                    <Component {...pageProps} />
                </Provider>
            </Container>
        );
    }
}));

Затем у меня есть компонент меню, который загружает страницу настроек с различными меню. 

import { withTranslation } from '../../../i18n'

class SettingsView extends PureComponent {

    constructor(props) {
      super(props);
    }

    componentDidMount() {
  
    }
  
    componentWillUnmount() {
  
    }
  
    render() {
      this._menu = [
        {

          title: this.props.t('menu_status'), // Title that is displayed as text in the menu
          url: "/status", // Identifier (url-slug)
          footerVisible: false

        },
        {
          title: this.props.t('menu_basic'), 
          url: "/settings/basicSettings",
          footerVisible: true
        },
        {
          title: this.props.t('menu_snmp'),
          url: "/settings/snmpSettings",
          footerVisible: true
        },
        {
          title: this.props.t('menu_sip'),
          url: "/settings/sipSettings",
          footerVisible: true
        },
        {
          title: this.props.t('menu_hardware'),
          url: "/settings/hardwareSettings",
          footerVisible: true
        },
        {
          title: this.props.t('menu_advanced'),
          url: "/settings/advancedSettings",
          footerVisible: true
        }
      ];
         // Return your Settings Pane
         return (
          <SettingsPane items={this._menu} index="/status" >
          <SettingsMenu headline="Intercom" />
          <SettingsSingleContent header={true}>
              <SettingsPage handler="/status" >
                  <StatusSettingsForm/>
              </SettingsPage>
              <SettingsPage handler="/settings/basicSettings">
                  <BasicSettingsForm />
              </SettingsPage>
              <SettingsPage handler="/settings/snmpSettings">
                  <SNMPSettingsForm />
              </SettingsPage>
              <SettingsPage handler="/settings/sipSettings">
                  <SIPSettingsForm />
              </SettingsPage>
              <SettingsPage handler="/settings/hardwareSettings">
                  <HardwareSettingsForm />
              </SettingsPage>
              <SettingsPage handler="/settings/advancedSettings" >
                  <AdvancedSettingsForm />
              </SettingsPage>
          </SettingsSingleContent>
        </SettingsPane>
          
         )
      }
  }
 

  export default withTranslation()(SettingsView)

Я не знаю, как сделать это, чтобы это изменялось динамически, поскольку это меню только повторно отображает при загрузке страницы (location.reload()).

Затем в одной из настроек формы у меня есть селектор языка. 

function submit(values, dispatch) {
  i18n.changeLanguage(values.language == "spanish" ? "es": "en")
  return dispatch(setAdvancedSetting(values));
}

Итак, когда я изменил язык, каждая метка страницы изменится на правильный язык (только те, которые относятся к меню, не меняются (поскольку у него есть проблема с перезагрузкой меню)).

Итак, если я попытаюсь перезагрузить страницу с изменениями языка, я не знаю, почему но страница перерисовывается с языком по умолчанию. Может быть, что-то с начальными реквизитами, которые я не полностью понимаю, или другой вариант ...

Итак, я борюсь с двумя проблемами:

  1. Как лучше разработать меню для меняется с изменением языка. Я думаю о динамических c языковых клавишах .. например. 

     this.props.t('menu_basic_settings) generate Basic Settings

    но это возможно ?? 

     this.props.t({this.props.header})

    Я имею в виду использование внешних свойств?

  2. При перезагрузке окна страница переключается на язык по умолчанию

...