Я столкнулся с недействительным крюком вызова на реагировать

Question

Вот мои скрипты, которые делают навигатор для лин gui - 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} />
}

Или вы можете создать свой собственный HO C (компонент более высокого порядка), который вы можете использовать, как в коде, который вы разместили:

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

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

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

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

export default withI18n(Navigation);