1

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

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本同一个应用程序请参阅 ...react-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);

4

2 回答 2

1

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

under your root directory rather than your client/ (considering your structure: root--client root--api

hence, you have 2 react. Just remove react-i18next & i18next under your package.json @root/ & remove your node_modules & package-lock.json files.

Do npm install react-i18next i18next --save under client/ instead.

于 2022-02-17T03:44:25.973 回答
1

钩子必须在组件内部使用，因为它们是如何通过 react 执行的。他们需要针对组件存储状态。您可以在 React 团队的Dan Abramov的这篇文章中阅读有关钩子如何工作的更多信息。

  1. 您可以使用另一个组件内部的钩子：
const App = props => {
  const { i18n } = useLingui()
  return <Navigation i18n={i18n} {...props} />
}
  1. 或者您可以制作自己的 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);
于 2020-05-01T00:50:41.357 回答