reactjs 为什么我得到这个错误:无效的挂接调用,只能在函数组件/的主体内调用挂接

k3bvogb1  于 2023-02-18  发布在  React
关注(0)|答案(3)|浏览(139)

错误:无效的挂接调用。只能在函数组件的主体内部调用挂接。以下原因之一可能会导致这种情况:
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>标签代码工作正常。

2admgd59

2admgd591#

试试这个

npm uninstall @material-ui/core @material-ui/icons

然后

npm i @material-ui/core @material-ui/icons

重新启动React服务器

npm start
// OR
yarn start

"如果成功就告诉我,祝你好运"

9jyewag0

9jyewag02#

事实证明,在我的例子中,我将包安装到了错误的文件夹中,我希望共享我的解决方案,以防有人犯与我相同的错误

pdkcd3nj

pdkcd3nj3#

我也面临着同样的问题,无效的钩子调用时,我安装chakraUI:1).您可能有不匹配的React版本和渲染器(如React DOM)2).您可能违反了钩子规则3).您可能在同一个应用中有多个React副本...解决方案:我看到的是我正在安装的src文件夹的React。然后我只是给了右键点击超过src的React,并点击打开集成终端和安装查克拉在src。这样我就解决了我的问题。希望它可以帮助谁面临同样的问题。

相关问题