如何在 i18next 配置中使用 cookie？答案

【问题标题】：How to use cookies in i18next configuration?如何在 i18next 配置中使用 cookie？
【发布时间】：2020-01-10 15:58:44
【问题描述】：

我想在我的 i18n.js 文件中使用 react-cookie 来设置语言。

我正在尝试这样，但它发送此错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。这可能由于以下原因之一而发生： 1. React 和渲染器的版本可能不匹配（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能在同一个应用中拥有多个 React 副本

import LanguageDetector from 'i18next-browser-languagedetector';
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import * as en from './locales/en.json'
import * as pl from './locales/pl.json'
import { useCookies } from 'react-cookie'

const { cookies } = useCookies(['i18n_locale'])

const resources = {
  en: {
    translation: en.default
  },
  "pl-PL": {
    translation: pl.default
  }
}

i18n
  .use(initReactI18next)
  .use(LanguageDetector)
  .init({
    resources,
    lng: cookies.i18n_locale ? cookies.i18n_locale : window.navigator.language,
    keySeparator: false,
    interpolation: {
      escapeValue: false
    }
  })

export default useCookies(i18n)

我希望它工作！

【问题讨论】：

标签： reactjs internationalization i18next react-i18next

【解决方案1】：

React 钩子有一些与其使用相关的规则 (see this page)。错误消息中提到了其中之一：

钩子只能在函数组件的主体内部调用。

关于react-cookie 用法：首先，将根元素包装在提供程序组件中。这将允许在任何基于函数的组件中沿树调用useCookies。从 lib 的文档中查看 this example。

【讨论】：