我收到错误消息："Invalid hook call"当我尝试运行我的 React 应用程序时。不明白为什么

Question

我收到错误消息：Invalid hook call. Hooks can only be called inside of the body of a function component当我尝试运行我的反应应用程序时。

import React from "react";
import BarChart from "../components/BarChart";
import LineChart from "../components/LineChart";
import Navbar from "../components/Navbar";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
row: {
display: "flex",
flexDirection: "row"
}
});
const Index = () => {
const classes = useStyles();
return (
<div>
<Navbar />
<div className={classes.row}>
<BarChart />
<LineChart />
</div>
</div>
);
};
export default Index;

它在第 16 行 (const classes = useStyles();( 中失败。

导航栏，BarChart和LinChart组件只是我创建的组件，这些组件中的代码似乎没有中断。如果我删除第 16 行，我可以运行我的代码而没有任何错误消息。

任何想法可能会有所帮助？

Answer 1

我在本地尝试了makeStyles，它工作得很好。请检查您的依赖项并将其更新为最新版本，然后重试。 我目前有："react": "^16.8.2", "react-dom": "^16.8.2", "@material-ui/core": "^4.9.12"