Question

当我在浏览器中运行我的应用程序时，我收到了一个无效的钩子调用错误。当我在我的应用程序中使用 makeStyles 时出现错误（我通过删除它进行了检查，错误消失了）。有人可以帮我找出我做错了什么吗？这是我的代码：

import React, { useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
    header: {
        background: '#C4C4C4',
        textAlign: 'center',
        boxShadow: '0px 2px 2px #A9A9A9',
        fontFamily: 'PT Sans Caption',
        fontSize: '36px',
        marginBottom: '20px',
        paddingTop: '20px',
        textTransform: 'uppercase',
        position: 'fixed',
        top: 0,
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
    },
});

const Header = (props) => {
    const classes = useStyles();
    const [ title ] = useState(props.title)

    return (
        <div className={classes.header}>{title}</div>
    );
};
export default Header;

任何帮助都会很棒！

Answer 1

我在你的代码中没有看到问题只是为了测试改变这个：移除 useState

        <div className={classes.header}>{props.title}</div>

或用于测试

<div className={classes.header}>title</div>

Answer 2

我不完全确定问题是什么，但我通过运行 np install、退出浏览器并运行 npm start 解决了这个问题。当浏览器重新加载时，错误消失了。

在 React 中使用 material-ui makeStyles 的钩子调用无效

2 个答案: