我在反应时遇到无效的挂钩调用

Question

这是我为 lingui-js 制作导航器的脚本。我在本地遇到了这个错误： ×

错误：挂钩调用无效。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生： 1. React 和渲染器的版本可能不匹配（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能在同一个应用程序中有多个 React 副本有关如何调试和修复此问题的提示，请参阅 ...react-invalid-hook-call。

"react": "^16.8.6", "react-dom": "^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

Hooks 必须在组件内部使用，因为它们是如何被 React 执行的。他们需要针对组件存储状态。您可以在 React 团队的 article from Dan Abramov 中阅读更多关于钩子如何工作的信息。

您可以在另一个组件内部使用挂钩：

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

或者您可以制作自己的 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

有时也是因为你做了这行： npm install react-i18next i18next --save

在你的根目录下而不是你的客户端/ （考虑到你的结构： root--客户端根--api

因此，您有 2 个反应。只需删除 package.json @root/ 下的 react-i18next & i18next 并删除 node_modules & package-lock.json 文件。

改为在 client/ 下执行 npm install react-i18next i18next --save。

我在反应时遇到无效的挂钩调用

I faced with Invalid hook call on react

reactjs

linguijs

react-hooks