每当我尝试使用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;
除了将类转换为函数外,一个简单的步骤是为包含使用“类”的组件的jsx创建一个函数(在您的情况下为)
<container></container>
,然后在类render()的返回内部调用此函数。作为标签。这样,您就可以从类中移出函数。它对我来说非常有效。就我而言,这是<table>
我将其移至函数TableStmt外部并在render内部将该函数称为<TableStmt/>