错误:无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一:
./src/index.js/
5 |从导入reportWebVitals/报告“生命体征”;6 |导入“./node_模块/bootstrap/dist/css/bootstrap.min.css”;7 |从'react Router dom'导入{BrowserRouter as Router};
8 |反应。渲染(9 | 10 | 11 |),
在应用程序中包含导航组件后。js文件无效钩子调用错误,下面是我的应用程序。js文件代码
import React from "react";
import Home from "./components/Home";
import About from "./components/About";
import { Route, Switch } from "react-router-dom";
import Navigation from "./Navigation";
export default function App() {
return (
<div className="app">
<Navigation />
<Switch>
<Route path="/about" component={About} />
<Route path="/" component={Home} />
</Switch>
</div>
);
}
删除导航组件后,错误不会出现在索引下面。js文件代码
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router} from 'react-router-dom';
ReactDOM.render(
<Router>
<App/>
</Router>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more:
reportWebVitals();
navigation.js
import { Navbar, Nav, Container } from 'react-bootstrap';
import React from 'react'
export default function Navigation() {
return (
<>
<Navbar collapseOnSelect fixed="top" expand="sm" bg="dark" variant="dark">
<Container>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav>
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/about">About</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</>
)
}
谁能帮我解决这个问题?
我正努力让你去工作。以下是功能组件: 我称之为: 我得到一个错误,如下所示: 错误:无效的钩子调用。钩子只能在函数组件的主体内部调用。发生这种情况的原因如下:1。React和渲染器(如React DOM)2的版本可能不匹配。你可能违反了Hooks 3的规则。同一应用程序中可能有多个React副本。 我已经调试并确认我使用的是单一版本。也许我使用状态钩子不正确? 这里是我调用自定义钩子的地方:
我的应用程序一直在工作,直到最后一次提交。 现在,它在< code>npm start上工作正常,但是在使用< code>npm run builder部署它之后,我遇到运行时错误: 不变冲突:缩小的反应错误# 321;访问https://reactjs.org/docs/error-decoder.html?invariant=321获得完整的消息,或者使用非精简的开发环境获得完整的错误和其他有
我想使用React在表中显示一些记录,但我得到了这个错误: 无效的挂接调用。钩子只能在函数组件的主体内部调用。这可能是以下原因之一: 您可能有不匹配的React和渲染器版本(如React DOM) 你可能违反了钩子规则 在同一个应用程序中可能有多个React副本,请参阅有关如何调试和修复此问题的提示。
我是一个很新的反应,并得到以下错误: 我想在提交表单时使用另一个组件。因此,在文件A中,当表单提交时,is使用一个函数,在调用其他组件之前首先检查某些内容,如: 在组件上,我有一些usstate钩子: 当页面正在加载的时候,我得到了这个错误,有没有人知道什么是错误的?
我得到以下错误,不确定我在箭头函数内实例化 react 钩子时做错了什么: 错误:挂接调用无效。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一: 您可能有不匹配的React和渲染器版本(如React DOM)。 您可能违反了钩子的规则。 同一应用程序中可能有多个React副本。请参阅https://reactjs.org/link/invalid-hook-call有关如何调试和修复此
我收到这个错误”无效的钩子呼叫。钩子只能在函数组件的主体内部调用。“当我尝试运行我的函数时。我试图运行一个脚本,生成reCaptcha令牌脚本如下: 这个组件应该生成令牌(这是我得到错误的地方) 在另一个组件中,我调用了前面的脚本组件,并传递了一个动作类型,但是我得到了提到的react钩子错误(仅显示相关代码)。 我想问题在于我调用/使用导入组件的方式,但我找不到解决方案?