每当我try 将makeStyles()
用于具有生命周期方法的组件时,我都会遇到以下错误:
无效的钩子调用.钩子只能在函数组件的主体内部调用.发生这种情况的原因如下:
- React和渲染器的版本可能不匹配(例如React DOM)
- 你可能违反了钩子的规则
- 同一个应用程序中可能有多个React副本
下面是产生此错误的代码的一个小示例.其他示例也将类分配给子项.我在MUI的文档中找不到任何显示使用makeStyles
的其他方法以及使用生命周期方法的能力的内容.
import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import { Container, makeStyles } from '@material-ui/core';
import LogoButtonCard from '../molecules/Cards/LogoButtonCard';
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
}));
const classes = useStyles();
class Welcome extends Component {
render() {
if (this.props.auth.isAuthenticated()) {
return <Redirect to="/" />;
}
return (
<Container maxWidth={false} className={classes.root}>
<LogoButtonCard
buttonText="Enter"
headerText="Welcome to PlatformX"
buttonAction={this.props.auth.login}
/>
</Container>
);
}
}
export default Welcome;