无效的挂钩呼叫 - react-材料-UI

Question

在反应方面，我是新手。我一直在尝试实现简单的行动组件，但是我遇到了一个错误，说

"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"

我已经在网上检查了，但是类似问题的给定答案都没有帮助 - 我尝试卸载和安装所有内容，检查是否反应和重新进行了检查。 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 包...天哪，我花了一段时间才找到它..

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