我想用React在一个表中显示一些记录,但我得到了这个错误:

无效的钩子调用。类的主体内部只能调用钩子 功能组件。这可能发生在以下情况之一 原因: React和渲染器的版本可能不匹配(比如React DOM) 你可能违反了胡克斯的规矩 你可能在同一个应用程序中有多个React副本,请参阅有关如何调试和调试的提示 解决这个问题。

import React, {
  Component
} from 'react';
import {
  makeStyles
} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing(3),
    overflowX: 'auto',
  },
  table: {
    minWidth: 650,
  },
}));

class allowance extends Component {
  constructor() {
    super();
    this.state = {
      allowances: [],
    };

  }

  componentWillMount() {
    fetch('http://127.0.0.1:8000/allowances')
      .then(data => {

        return data.json();

      }).then(data => {

        this.setState({
          allowances: data
        });

        console.log("allowance state", this.state.allowances);
      })

  }



  render() {
    const classes = useStyles();
    return ( <
      Paper className = {
        classes.root
      } >
      <
      Table className = {
        classes.table
      } >
      <
      TableHead >
      <
      TableRow >
      <
      TableCell > Allow ID < /TableCell> <
      TableCell align = "right" > Description < /TableCell> <
      TableCell align = "right" > Allow Amount < /TableCell> <
      TableCell align = "right" > AllowType < /TableCell>

      <
      /TableRow> <
      /TableHead> <
      TableBody > {
        this.state.allowances.map(row => ( <
          TableRow key = {
            row.id
          } >
          <
          TableCell component = "th"
          scope = "row" > {
            row.AllowID
          } <
          /TableCell> <
          TableCell align = "right" > {
            row.AllowDesc
          } < /TableCell> <
          TableCell align = "right" > {
            row.AllowAmt
          } < /TableCell> <
          TableCell align = "right" > {
            row.AllowType
          } < /TableCell>                     <
          /TableRow>
        ))
      } <
      /TableBody> <
      /Table> <
      /Paper>
    );
  }

}

export default allowance;

当前回答

React linter假定每个方法都以使用钩子开始,并且钩子不能在类中工作。通过将const usstyles重命名为任何不以use开头的东西,比如const myStyles,就可以了。

更新:

makestyle是钩子api,你不能在类中使用它。你可以使用样式组件API。在这里看到的

其他回答

注意导入问题——对我来说,错误是关于组件和子组件的导入/自动导入失败。与函数类与类组件无关。

这很容易发生,因为VS code自动导入可以指定的路径不能工作。 如果在组件中使用了import {MyComponent}和export default,则导入应该说import MyComponent 如果某些组件在其文件夹中使用index.js作为路径的shotcut,而其他组件则不使用,则导入可能会中断。在这里,自动导入可能会导致问题,因为它合并了来自'../../common'的{TextComponent, ButtonComponent, ListComponent}相同文件夹中的所有组件

尝试注释掉文件中给出错误的一些组件,您可以测试这是否是问题所在。

可能发生此错误的另一个原因是,如果声明函数组件时使用了箭头函数签名而不是函数签名。

例: 从箭头函数更改函数组件声明

export const Counter = (props) => {}

TO函数声明

export function Counter (props) {}

这将有助于解决问题。 至少对我来说是这样。

我也有同样的问题,在编辑启动后得到了解决。Json文件,并通过从类型中删除'pwa-'来更改配置类型:

所以,与其:

"type": "pwa-node",

它应该是:

"type": "node",

如果你的前端工作在它自己的文件夹中,你可能需要在这个文件夹中安装@material-ui/core @material-ui/icons,而不是在后端文件夹中。

@material-UI/Core @material-UI/ICONS 中的 NPM

您可以将类组件转换为钩子,但Material v4有一个withStyles HOC。 https://material-ui.com/styles/basics/#higher-order-component-api 使用这个HOC,您可以保持代码不变。