为什么我的 React 应用程序中会出现'无效的钩子调用”错误？

React 中无效的 Hook 调用错误：综合指南

当尝试使用 React 在表中显示数据时，您可能会遇到以下错误“无效的钩子调用。钩子只能在函数组件的主体内部调用。”出现此错误的原因有多种，了解如何解决它对于 React 开发至关重要。

错误原因

1. React 版本不匹配: 确保您安装了正确版本的 React 和关联的渲染器。版本不一致可能会导致此错误。
2. 违反 Hook 规则： React hook 遵循特定规则，例如仅在功能组件内调用。确保遵守这些约定。
3. 多个 React 实例： 验证您的应用程序中是否只有一个 React 实例。多个实例可能会导致冲突并触发此错误。

Material-UI 示例

考虑以下代码示例：

<code class="javascript">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;</code>

解决方案

在这个例子中，出现错误是因为组件被定义为类组件。 React hooks 在以后的 React 版本中引入，只能在功能组件中使用。要解决此问题：

1. 将类组件转换为函数式组件。
2. 使用钩子而不是方法来管理状态和执行副作用。

进一步帮助

有关修复“无效挂钩调用”错误的其他指导：

• [React 文档](https://reactjs.org/ docs/hooks-rules.html)
• [声明式设置](https://blog.logrocket.com/declarative-setup-of-front-end-typescript-and-react/)
• [npm 链接替代命令](https://blog.bitsrc.io/an-alternative-npm-link-command-a49f7a92bfd4)

以上是为什么我的 React 应用程序中会出现'无效的钩子调用”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！