Question

我是React的新手，我正在尝试构建代码。我正在建立一个博客主页，因此我从Header开始，并且运行良好。我所做的只是在index.js中编写代码。

此后，我尝试重组代码，将其拆分为不同的文件，类和函数，但出现有关“无效的钩子调用”的错误。

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

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

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 Component用作常规功能，其原因为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>
  );
}

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

1 个答案: