每当我尝试使用makeStyles()具有生命周期方法的组件时,都会出现以下错误:
makeStyles()
无效的挂接调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生: 您可能使用了不匹配的React和渲染器版本(例如React DOM) 您可能正在违反挂钩规则 您可能在同一应用中拥有多个React副本
无效的挂接调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生:
下面是一个产生此错误的代码的小示例。其他示例也将类分配给子项。我在MUI的文档中找不到任何显示其他使用方式makeStyles并可以使用生命周期方法的功能。
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;
我们落得这样做使用类组件和创建的功能组件被停止,利用useEffect()从挂钩API的生命周期方法。这使您仍然可以makeStyles()使用生命周期方法,而无需增加制作高阶组件的复杂性。这要简单得多。
useEffect()
例:
import React, { useEffect, useState } from 'react'; import axios from 'axios'; 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', margin: theme.spacing(1) }, highlight: { backgroundColor: 'red', } })); // Highlight is a bool const Welcome = ({highlight}) => { const [userName, setUserName] = useState(''); const [isAuthenticated, setIsAuthenticated] = useState(true); const classes = useStyles(); useEffect(() => { axios.get('example.com/api/username/12') .then(res => setUserName(res.userName)); }, []); if (!isAuthenticated()) { return <Redirect to="/" />; } return ( <Container maxWidth={false} className={highlight ? classes.highlight : classes.root}> <LogoButtonCard buttonText="Enter" headerText={isAuthenticated && `Welcome, ${userName}`} buttonAction={login} /> </Container> ); } } export default Welcome;