无效的挂钩调用 - 反应 - material-ui

Question

我是 React 新手。我一直在尝试实现 SimpleBottomNavigation 组件，但我收到一条错误消息

"Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how"

我已经在线检查过，但是 none 对类似问题的给定答案有所帮助 - 我尝试再次卸载和安装所有内容，检查反应和反应 - dom 是否相同，如果有必要的材料部分。

有人可以帮我吗？


import './App.css';
import Header from './components/Header';
import SimpleBottomNavigation from './components/MainNav';

function App() {
  return (
    <div className="App">
     <Header />
     <SimpleBottomNavigation />
    </div>
  );
}

export default App;

和

import * as React from 'react';
import Box from '@mui/material/Box';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import RestoreIcon from '@mui/icons-material/Restore';
import FavoriteIcon from '@mui/icons-material/Favorite';
import LocationOnIcon from '@mui/icons-material/LocationOn';

export default function SimpleBottomNavigation() {
  const [value, setValue] = React.useState(0);

  return (
    <Box sx={{ width: 500 }}>
      <BottomNavigation
        showLabels
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
      >
        <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
        <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
        <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
      </BottomNavigation>
    </Box>
  );
}

Answer 1

有两个package.json...可能吗？

package.json:

{
  "name": "react-webite",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

和

{
  "dependencies": {
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@material-ui/core": "^4.12.3",
    "@mui/icons-material": "^5.5.1",
    "@mui/material": "^5.5.2",
    "axios": "^0.26.1",
    "react-router-dom": "^6.2.2"
  }
}

Header 正常工作，只是当我在 app.js 中添加 SimpleBottomNavigation 时，出现白屏。

Answer 2

已解决！原来我只是在另一个文件夹中安装了@mui 包...天哪，我花了一段时间才找到它..

但非常感谢您的帮助！ :)

无效的挂钩调用 - 反应 - material-ui

Invalid hook calls - react - material-ui

javascript

reactjs

material-ui