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

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

当前回答

如果您正在使用mobx，并且您的功能组件被包装在mobx观察者函数中，也会发生此错误。如果是这种情况，请确保您使用的是mobx-react 6.0.0或更高版本。旧版本会将您的功能组件转换为隐藏的类，所有钩子都会因此错误而失败。

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

2021-05-07 13:35:53

其他回答

如果上面所有的都不能工作，特别是如果有很大的大小依赖(就像我的情况)，构建和加载都至少需要15秒，所以延迟似乎给出了一个错误的消息“无效钩子调用”。因此，您所能做的就是在测试之前留出一些时间来确保构建已经完成。

2020-05-12 23:08:45

捕获这个错误:找到解决方案。

出于某种原因，我的标签上有2个onClick属性。小心使用你或别人的自定义组件，也许其中一些已经有onClick属性。

2020-07-16 07:13:01

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

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

export const Counter = (props) => {}

TO函数声明

export function Counter (props) {}

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

2022-06-04 18:26:00

你可以通过调用一个箭头函数来返回它的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

当我使用npm link安装我的本地库时，我遇到了这个问题，我使用cra构建了本地库。我在这里找到了答案。字面意思是:

当你使用npm link或类似的工具时，这个问题也会出现。在这种情况下，您的捆绑器可能“看到”两个react -一个在应用程序中文件夹和图书馆文件夹里的一个。假设'myapp'和'mylib' 是兄弟文件夹，一个可能的解决办法是运行'npm link . ./myapp/node_modules/react这应该使库使用应用程序的React副本。

因此，运行命令:npm link <path_to_local_library>/node_modules/react，例如。在我的情况下NPM链接..项目目录下的/libraries/core/decipher/node_modules/react修复了这个问题。

2020-09-02 12:22:35

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

推荐文章

最新文章

标签