功能组件未注册为功能组件？

Question

我试图在我的TypeScript React应用程序中使用Materials useStyle，但我遇到了一个奇怪的问题。

// index.tsx

import React from 'react';
import {render} from 'react-dom';

import {makeStyles} from '@material-ui/styles';

const useStyles = makeStyles({
  qwe: {
    color: 'red',
  },
});

const init = async () => {
  const classes = useStyles();

  const Root = () => (
    <div className={classes.qwe}>asd</div>
  );

  render(<Root />, document.getElementById('root'));
};

init();

当我运行这个应用程序时，我会收到这样的消息：

未知(承诺)错误:无效钩子调用。钩子只能在函数组件的主体内调用。

我调用的钩子是useStyles()。这个钩子位于功能组件的顶层，我正在运行React和React的最新版本：

    "react": "^17.0.2",
    "react-dom": "^17.0.2",

Answer 1

您应该将function钩子放入function组件中，而不是纯JavaScript函数，后者会破坏钩子-规则。react函数组件的返回值必须是React元素(有效的JSX元素)。

import React from 'react';
import {render} from 'react-dom';
import {makeStyles} from '@material-ui/styles';

const useStyles = makeStyles({
  qwe: {
    color: 'red',
  },
});

const init = () => {
  const Root = () => {
    const classes = useStyles();
    return <div className={classes.qwe}>asd</div>
  };

  render(<Root />, document.getElementById('root'));
};

init();

Answer 2

我也犯了同样的错误，我添加了一个param来解决这个问题。在您的const = add ()中，添加"{}“，如下所示。

const Init = async ({}) => {
  .....
};

给我打电话

<Init />