使用 useState、React 时 Hook 调用无效答案

【问题标题】：Invalid Hook call when using useState, React使用 useState、React 时 Hook 调用无效
【发布时间】：2020-03-08 14:15:26
【问题描述】：

我第一次遇到的问题很小。我正在尝试使用一个简单的 useState，但由于某种原因，我不明白为什么 React 会抛出一个错误以及我试图做的任何事情 - 什么都不修复。

这是错误的图像：错误描述：

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生： 1. React 和渲染器的版本可能不匹配（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能在同一个应用中拥有多个 React 副本

我的代码：（很简单）

import React, {useState} from "react";

function Login() {
    const [user, setUser] = useState({});


  return <div> why error? </div>;
}
export default Login;

尝试按照他们的解决方案但没有成功...谢谢

编辑：这是我渲染组件的地方 -

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./components/Home";
import Contact from "./components/Contact";
import Login from "./components/Login";
import Register from "./components/Register";
import NotFound from "./components/NotFound";
import Navbar from "./components/Navbar";
function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <Switch>
          <Route path="/" exact render={Home} />
          <Route path="/contact" exact component={Contact} />
          <Route path="/login" exact render={Login} />
          <Route path="/register" exact render={Register} />
          <Route render={NotFound} />
        </Switch>
      </div>
    </Router>
  );
}
...

【问题讨论】：

也许这个链接可以提供帮助：reactjs.org/warnings/invalid-hook-call-warning.html
你实际在哪里渲染组件？
试过了..没有帮助
我试图重现，但我没有收到您的错误。它对我有用
检查科林斯的答案，我试过他说的，可以重现你的错误

标签： javascript reactjs react-router react-hooks

【解决方案1】：

这里的问题是你如何渲染你的组件。你不能这样做：

Login()

但你可以这样做：

<Login />

更新：同样，你不能这样做：

<Route path="/login" exact render={Login} />

你需要：

<Route path="/login" exact render={() => <Login />} />

【讨论】：

您能解释一下原因吗？ @Colin Ricardo
和上面的逻辑是一样的。如果您想渲染组件而不仅仅是调用功能组件，那么您需要这样做。
或者使用component={Login}，因为你现在不需要使用render。
是的，正如@devserkan 所说！
为什么 component={Login} 可以工作而 render={Login} 不行？有什么不同？ @devserkan

【解决方案2】：

函数本身没有错误。在另一个文件的另一个组件中尝试了这个。检查其他地方的错误。代码中的其他 40 行是什么？

React 的版本是什么？

【讨论】：