错误:无效的挂接调用。只能在函数组件的主体内部调用挂接。以下原因之一可能会导致这种情况:
1.您可能有不匹配的React和呈现器版本(例如React DOM)
1.你可能违反了钩子的规则
1.同一应用程序中可能有多个React副本
这是我的App.js代码
import './App.css';
import Header from './Header'
function App() {
return (
<div className="app">
< Header />
</div>
);
}
export default App;
标题.js代码
import React from 'react'
import './Header.css';
import PersonIcon from '@material-ui/icons/Person';
import IconButton from '@material-ui/core/IconButton';
function Header() {
return (
<div className='header'>
<IconButton>
<PersonIcon fontSize="large" className="header__icon" />
</IconButton>
</div>
)
}
export default Header
我在index.js中使用了我的App.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
当我删除<PersonIcon>
和<IconButton>
标签代码工作正常。
3条答案
按热度按时间2admgd591#
试试这个
然后
重新启动React服务器
"如果成功就告诉我,祝你好运"
9jyewag02#
事实证明,在我的例子中,我将包安装到了错误的文件夹中,我希望共享我的解决方案,以防有人犯与我相同的错误
pdkcd3nj3#
我也面临着同样的问题,无效的钩子调用时,我安装chakraUI:1).您可能有不匹配的React版本和渲染器(如React DOM)2).您可能违反了钩子规则3).您可能在同一个应用中有多个React副本...解决方案:我看到的是我正在安装的src文件夹的React。然后我只是给了右键点击超过src的React,并点击打开集成终端和安装查克拉在src。这样我就解决了我的问题。希望它可以帮助谁面临同样的问题。