javascript - 将类转换为函数 React Error 无效的钩子调用
问题描述
我一直在将我的类组件转换为函数,但我遇到了与我的导出默认值有关的这个钩子错误。我确定这很简单,但我找不到我正在寻找的答案。
这是导致错误的代码:
import React from 'react'
import {AppBar, Toolbar, Button, Typography, makeStyles} from '@material-ui/core'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import Menu from './Menu'
const useStyles = makeStyles((theme) => ({
header: {
backgroundColor: "#1d3834",
},
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}))
function Header(props) {
const classes = useStyles()
const renderContent = () => {
switch (props.auth) {
case null:
return
case false:
return (
<Button color="inherit" href="/signin">Sign In</Button>
)
default:
return (
<Button color="inherit" href="/api/logout">Sign Out</Button>
)
}
}
return(
<div className={classes.root}>
<AppBar position="static" className={classes.header}>
<Toolbar>
<Menu/>
<Typography variant="h6" className={classes.title} >
<Link
to={props.auth ? '/items' : '/'}
className="left brand-logo"
>
</Link>
</Typography>
{renderContent()}
</Toolbar>
</AppBar>
</div>
);
}
function mapStateToProps({auth}) {
return{ auth }
}
export default connect(mapStateToProps)(makeStyles(useStyles) (Header))
我希望有人以前遇到过类似的问题,并且能够给我一些反馈,谢谢:)
解决方案
主要问题是你export
的组件如何。改为尝试如下:
export default connect(mapStateToProps)(Header)
你真的不需要makeStyles(useStyles)
那里的部分。
+1 建议 - 与问题无关:
这个建议与问题本身无关,这只是我喜欢使用Material-UImakeStyles
在我的代码存储库中组织内容的一个小改进。
通常我会创建一个styles.tsx
在您的情况下如下所示的内容,放置在您的组件文件旁边:
import { makeStyles } from "@material-ui/core"
const useStyles = makeStyles((theme) => ({
header: {
backgroundColor: "#1d3834",
},
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}))
export default useStyles
然后import
在组件中如下:
import useStyles from "./styles"
并且用法与您的组件中类似:
function Header(props) {
const classes = useStyles()
// ... rest of your component
}
推荐阅读
- r - 如何根据公共 ID 将一个变量(列)中的 NA 替换为另一行中的值
- bash - Linux Bash 脚本 Awk 字段分隔符
- mysql - mysql 8 不接受数据文件作为表空间的文件
- c# - 对 EF6 使用哪种继承策略感到困惑(CodeFirst)
- reactjs - Console.log 最初显示一个对象,然后在单击时显示一个对象的数组
- python - 通过 .msi 在 Windows 10 上安装 MySql Python 连接器 64 位时访问被拒绝错误
- javascript - 在 React 的单个组件中发送多个道具时遇到问题
- python - 有没有更好的方法从pdf中提取数据?
- powershell - Copy-Item:找不到接受参数“+”的定位参数
- nim-lang - 如何规范 Nim 中的文件路径?