2

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

我正在尝试这样，但它发送此错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： 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)

我想让它工作！

4

1 回答 1

0

React hooks 有一些与它们的使用相关的规则（参见这个页面）。错误消息中提到了其中之一：

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

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

于 2019-09-10T15:59:46.827 回答