![](/img/trans.png)
[英]React Hook “useReducer” is called in function “fetchData” which is neither a React function component or a custom React Hook function
[英]React Hook "useStyles" is called in function "appBar" which is neither a React function component or a custom React Hook function
根据标题,我在使用 React 实现 Material UI 时收到以下错误消息。
我已经查看了钩子的规则( https://reactjs.org/docs/hooks-rules.html ),但我不确定我错过了什么。 提供的任何帮助将不胜感激。
这是我的源代码:
import React from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}),
);
export default function appBar() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</div>
);
}
尝试使用PascalCase重命名您的组件。
eslint-plugin-react-hooks认为你的函数组件不是函数组件,因为它不是以大写字母开头。
注意: react 文档声明用户定义的组件在 JSX 中使用之前必须大写,以避免被视为 HTML 元素。
在下面的示例中,我将组件命名为AppBarWrapper
因为名称AppBar
已被从@material-ui/core/AppBar
导入的组件使用。
import React from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}),
);
export default function AppBarWrapper() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</div>
);
}
首先安装:
npm install @material-ui/styles
第二:阅读文档
" 入门 您可以使用 3 种可能的 API 来生成和应用样式,但是它们都共享相同的底层逻辑。"
钩子API
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.