Я столкнулся с недопустимым вызовом ловушки при реакции

Question

Вот мои скрипты, которые делают навигатор для lingui-js. Я столкнулся с этой ошибкой на моем локальном компьютере: ×

Ошибка: неверный вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента. Это может произойти по одной из следующих причин: 1. Возможно, у вас несовпадающие версии React и средства визуализации (например, React DOM) 2. Возможно, вы нарушаете правила хуков 3. У вас может быть более одной копии React в то же приложение См. раздел... response-invalid-hook-call для получения советов по отладке и устранению этой проблемы.

"реагировать": "^16.8.6", "реагировать-дом": "^16.8.6",

Мой файл:

import * as React from "react";
import { useLingui } from "@lingui/react";

const Navigation = ({ i18n, locales }) => (
  <select selected={i18n.locale}>
    {Object.keys(locales).map(locale => (
      <option key={locale} onClick={() => i18n.activate(locale)} value={locale}>
        {locales[locale]}
      </option>
    ))}
  </select>
);

export default useLingui(Navigation);

Answer 1

Хуки должны использоваться внутри компонентов из-за того, как они выполняются с помощью реакции. Им нужно сохранять состояние для компонента. Вы можете прочитать больше о том, как работают хуки, в этой статье от Дэна Абрамова из React Team.

1. Вы можете использовать ловушку внутри другого компонента:

const App = props => {
  const { i18n } = useLingui()
  return <Navigation i18n={i18n} {...props} />
}

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

const withI18n = WrappedComponent => props => {
  const { i18n } = useLingui()
  return <WrappedComponent i18n={i18n} {...props} />
}

HOC используется следующим образом:

import * as React from "react";
import { withI18n } from "../withI18n";

const Navigation = ({ i18n, locales }) => (...);

export default withI18n(Navigation);

Answer 2

Иногда это также потому, что вы делаете эту строку:

в вашем корневом каталоге, а не в вашем клиенте/ (учитывая вашу структуру: root--client root--api

следовательно, у вас есть 2 реакции. Просто удалите react-i18next и i18next из вашего package.json @root/ и удалите ваши файлы node_modules и package-lock.json.

Делать npm install react-i18next i18next --saveпод клиентом/вместо этого.