ฉันได้รับข้อผิดพลาดด้านล่างเมื่อใดก็ตามที่ฉันพยายามใช้makeStyles()
กับส่วนประกอบด้วยวิธีวงจรชีวิต:
สายเบ็ดไม่ถูกต้อง ตะขอสามารถเรียกได้เฉพาะภายในร่างกายของส่วนประกอบฟังก์ชันเท่านั้น สิ่งนี้อาจเกิดขึ้นจากสาเหตุใดสาเหตุหนึ่งต่อไปนี้:
- คุณอาจมีเวอร์ชันของ React และ renderer ที่ไม่ตรงกัน (เช่น React DOM)
- คุณอาจทำผิดกฎของ Hooks
- คุณอาจมี 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;
invalid hook call
ข้อผิดพลาดนี้ - ขอบคุณที่พาฉันไปในทิศทางที่ถูกต้อง !!