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

当前回答

Bad:

import { useDispatch } from 'react';

好:

import { useDispatch } from 'react-redux';

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

其他回答

我在一个自定义node_module上工作时遇到了同样的问题,并在cra(创建react应用程序)中使用npm link进行测试。

我发现在我的自定义节点包中,我必须添加一个peerDependencies

"peerDependencies": {
    "@types/react": "^16.8.6 || ^17.0.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },

我把它加到我的包里。json,然后重新构建我的自定义包。 然后在CRA,我吹走node_modules, re npm install, re -do npm link <package>,然后启动项目。

固定的一切!

昨天,我缩短了代码(只是添加了<Provider store={store}>),仍然得到了这个无效的钩子调用问题。这让我突然意识到我犯了什么错误:我没有在那个文件夹中安装react-redux软件。

我已经在另一个项目文件夹中安装了这个软件,所以我没有意识到这个项目也需要它。安装之后,错误就消失了。

与NPM NPM安装react@latest react-dom@latest 用纱 纱线添加react@latest react-dom@latest

出现这种情况的原因有很多。其中之一是,当包的安装超出范围时。它容易混淆两个react应用程序。

解释:

这些包不应该安装在不同的级别。

这个错误

app
 |node_modules          <-- some packages installed here
 |package.json
node_modules
package.json            <-- some packages installed here

正确的方法

app
 |node_modules
 |package.json          <-- install all the packages at the same heirarchy

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

所以,与其:

"type": "pwa-node",

它应该是:

"type": "node",