最小示例中的无效挂钩调用错误[关闭]答案

【问题标题】：Invalid hook call error in minimal example [closed]最小示例中的无效挂钩调用错误[关闭]
【发布时间】：2020-08-17 06:59:00
【问题描述】：

我正在尝试使用 React 前端编写一个 SPA，而我编写的最简单的代码是抱怨一个无效的钩子调用。

我了解，根据错误消息，此错误的三个主要原因：

您的 React 和渲染器版本可能不匹配（例如 React DOM）

您可能违反了 Hooks 规则

您可能在同一个应用中拥有多个 React 副本

我检查了npm ls react 和npm ls react-dom，它们都报告了各自软件包的单个安装，版本为 16.13.1，所以我不认为这是原因 #1 或原因 #3。至于违反钩子规则，这似乎是不可能的，因为代码就是这样：

import { useState } from "react";
import ReactDOM from "react-dom";

const Main = () => {
  const [count, setCount] = useState(0);

  return(
    <>
    </>
  );
};

const reactRoot = document.getElementById("react-root");
ReactDOM.render(Main(), reactRoot);

对我来说，这看起来是一个非常好的功能组件，而且显然没有循环或条件。这里还可能发生什么？

【问题讨论】：

你正在调用 Main 作为一个函数，没有明显的原因。你需要在范围内有 React (import React, { useState } from 'react')，你需要使用 JSX 标签或命令式 API。
谢谢，我知道我做了什么——最近写了大量的 Python，这就是你如何在 Python 中实例化 Main 类的对象。更改为 JSX 标签修复了它。

标签： javascript reactjs react-hooks react-dom

【解决方案1】：

正如 cmets 中所指出的，我的意思是使用 JSX 标签 <Main /> 而不是调用 Main()。

【讨论】：