reactjs - 将反应版本从 16.13.1 更新到 17.0.1 后出现无效的挂钩调用错误

Question

我的 react-web 应用程序出现以下错误。

*错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本 有关如何调试和修复此问题的提示，请参阅https://reactjs.org/link/invalid-hook-call。*。

这是我的代码：

import React from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Dropdown } from 'tabler-react';
import regeneratorRuntime from 'regenerator-runtime';

const LanguageSelector = () => {
  const {t, i18n} = useTranslation();

  const clicked = (event) => {
    i18n.changeLanguage(event.target.value);
  };

  const clickedEn = () => {
    i18n.changeLanguage("en");
  };

  const clickedTr = () => {
    i18n.changeLanguage("tr");
  };

  return (
    <Button.List align={"right"}>
      <Dropdown
        outline
        type="button"
        size="sm"
        toggle={false}
        color="primary"
        arrow
        icon="globe"
        triggerContent={t('selectLanguage')}
        itemsObject={[
          {
            value: "English",
            onClick: clickedEn
          },
          {isDivider: true},
          {
            value: "Türkçe",
            onClick: clickedTr
          },
        ]}
      />
    </Button.List>
  );
};

export default LanguageSelector;

这是 package.json 文件：

{
  "name": "smt",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",
  "engines": {
    "node": ">=8",
    "npm": ">=5"
  },
  "peerDependencies": {
    "react": "^15.0.0 || ^16.12.0",
    "react-dom": "^15.0.0 || ^16.12.0"
  },
  "dependencies": {
    "js-file-download": "^0.4.8",
    "konva": "^7.2.0",
    "moment": "^2.24.0",
    "react-image-lightbox": "^5.1.1",
    "react-konva": "^17.0.0-0",
    "react-router-dom": "^5.1.2",
  }
}

标签： reactjsreact-hooks