无效的钩子调用。钩子只能在函数组件的内部调用

我想用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;

当前回答

在我的NextJs应用中，我也遇到了同样的问题。在我的例子中，我认为这是与缓存相关的问题。删除"后运行项目。“Next”文件夹修复了问题。我希望删除React中的构建文件夹也能起到同样的作用。

2022-07-09 14:58:45

其他回答

Bad:

import { useDispatch } from 'react';

好:

import { useDispatch } from 'react-redux';

我记得有一次我从“react”中导入了useDispatch，而不是从“react-redux”中导入。这是很难弄清楚的，因为代码从每个角度都是正确的，我只是几个小时都猜不出来

2022-06-22 17:13:45

我遇到这个问题，我的错误原因是我开发项目A，我把另一个项目B链接到A，但是A有React包，B也有React包，它们是同一个版本(16.13)。但是这引起了问题，我设置文件的意思是webpack.config.js，像这样:

alias: {
  'react': path.join(path.resolve(__dirname), '../node_modules/react'),
},

将B React包解析为A React包，我猜原因是一个项目不能有两个或两个以上的React包，即使它们是相同的版本。但我无法证实我的猜测。

2021-05-21 10:22:22

你可以通过调用一个箭头函数来返回它的React来使用“export default”。通过将MaterialUI类对象道具传递给组件，这些道具将在Component render()中使用。

class AllowanceClass extends Component{
    ...
    render() {
        const classes = this.props.classes;
        ...
    }
}

export default () => {
    const classes = useStyles();
    return (
        <AllowanceClass classes={classes} />
    )
}

2020-05-27 17:21:21

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

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

2022-03-29 10:12:02

对我来说，这个问题是由webpack设置解决引起的。Symlinks (https://webpack.js.org/configuration/resolve/#resolvesymlinks)，设置为false:

  resolve: {
    symlinks: false,

因此，从另一个包到React的符号链接无法解析，并导致无效钩子调用错误。

将它设置为true或简单地省略它(显然它默认为true)解决了问题:

  resolve: {
    symlinks: true,

2022-10-18 11:00:43

无效的钩子调用。钩子只能在函数组件的内部调用

推荐文章

最新文章

标签