错误:无效的挂钩调用.在构造我的代码时

Question

我是React的新手，我正在尝试构建我的代码。我正在建立一个博客主页，所以我从标题开始，它运行得很好；我所做的只是用index.js编写代码。

在那之后，我试图重组我的代码，将其拆分为不同的文件、类和函数，但我得到了一个关于"无效钩子调用"的错误。

我的意图是构建一个结构良好的应用程序，所以我决定将组件逻辑从他的外观和风格中分离出来
我编写了一个扩展React.Component的Header类；将处理我的组件的逻辑
然后我编写了一个简单的函数，该函数将由类的render()方法调用，并返回组件结构
最后，我创建了一个包含组件样式的文件；它只包含并导出一个定义样式的const

这是我的问题；当我尝试调用函数makeStyles(style)()时，我在shell中没有收到日志错误，但我的浏览器显示以下消息：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.

这是一些代码。

Header.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles'
import headerStyles from './HeaderStyles';

function HeaderBlock(props) {
const classes = makeStyles(theme => (headerStyles))();
return(
<header className={classes.header}>
...
</header>
);
}

class Header extends react.Component {
constructor(props) {
super(props);
}
render(props)
return HeaderBlock(props);
}
}
export default Header;

HeaderStyles.js

const headerStyle = {
header: {
...
}
export default headerStyles;
}

我不确定这个错误，我期望的结果很简单：只是我设计的标题，应用了样式。

Answer 1

您的问题在这里return HeaderBlock(props);

您正在使用React组件作为正常函数，这会导致Hooks can only be called inside of the body of a function component。

你应该做的是改变

return HeaderBlock(props);

至

return <HeaderBlock {...props} />;

也不应该在函数组件内部调用makeStyles，只需要调用一次，但如果在函数组件内调用，则在每次渲染时都会调用它。

//     only calls makeStyles once
const useStyles = makeStyles(theme => (headerStyles))
function HeaderBlock(props) {
const classes = useStyles();
return(
<header className={classes.header}>
...
</header>
);
}