how to setup react-i18n with hooks, getting TypeError: Cannot read property '0' of undefined

Question

尝试使用挂钩设置 react-i18n 时出现此错误

TypeError: Cannot read property '0' of undefined

这里是i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next/hooks';

// import Backend from 'i18next-xhr-backend';
// import LanguageDetector from 'i18next-browser-languagedetector';
// not like to use this?
// have a look at the Quick start guide
// for passing in lng and translations on init

i18n
  // load translation using xhr -> see /public/locales
  // learn more: https://github.com/i18next/i18next-xhr-backend
  // .use(Backend)
  // // 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({
    fallbackLng: 'en',
    debug: true,
    resources: {
      en: {
        translation: {
          "hello world": "hello world from i18n"
        }
      }
    },
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    }
  });


export default i18n;

这是一个使用它的组件。

import React from 'react';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/styles';
import { push } from 'connected-react-router';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { useTranslation } from 'react-i18next/hooks';
import {
  increment,
  incrementAsync,
  decrement,
  decrementAsync,
} from '../../modules/counter';

const useStyles = makeStyles({
  button: {
    margin: '5px',
  },
});

const Home = props => {
  const classes = useStyles();
  const [t] = useTranslation('translation');

  return (
    <div>
      <h1>Home</h1>
      <h1>{t('hello world')}</h1>
      <p>Count: {props.count}</p>

      <p>
        <Button
          className={classes.button}
          color="primary"
          variant="contained"
          onClick={props.increment}
        >
          Increment
        </Button>
        <Button
          className={classes.button}
          color="primary"
          variant="contained"
          onClick={props.incrementAsync}
          disabled={props.isIncrementing}
        >
          Increment Async
        </Button>
      </p>

      <p>
        <Button
          className={classes.button}
          color="primary"
          variant="contained"
          onClick={props.decrement}
        >
          Decrement
        </Button>
        <Button
          className={classes.button}
          color="primary"
          variant="contained"
          onClick={props.decrementAsync}
          disabled={props.isDecrementing}
        >
          Decrement Async
        </Button>
      </p>

      <p>
        <Button
          className={classes.button}
          color="primary"
          variant="contained"
          onClick={() => props.changePage()}
        >
          Go to about page via redux
        </Button>
      </p>
    </div>
  );
};

const mapStateToProps = ({ counter }) => ({
  count: counter.count,
  isIncrementing: counter.isIncrementing,
  isDecrementing: counter.isDecrementing,
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      increment,
      incrementAsync,
      decrement,
      decrementAsync,
      changePage: () => push('/about-us'),
    },
    dispatch
  );

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home);

Answer 1

这是一个正确的设置

i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next/hooks';

// the translations
// (tip move them in a JSON file and import them)
const resources = {
  en: {
    translation: {
      'Welcome to React': 'Welcome to React and react-i18next',
    },
  },
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: 'en',

    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

export default i18n;