首页  >  文章  >  web前端  >  为什么我的 React 组件中出现“无效的 Hook Call”错误以及如何修复它?

为什么我的 React 组件中出现“无效的 Hook Call”错误以及如何修复它?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-08 00:35:03900浏览

Why am I getting an

解决 React 组件中的“无效 Hook 调用”错误

React hooks 提供了一种与组件状态交互的强大方法,但是它们来了必须遵守某些规则。可能发生的一种常见错误是“无效的挂钩调用”。当钩子在函数组件主体之外调用时,就会发生这种情况。

错误原因:

  1. React 版本不匹配:确保您拥有兼容版本的 React 和渲染器(例如 React DOM)。
  2. 打破 Hook 规则: 在每个渲染周期中必须以相同的顺序调用 Hook,并且不能在内部调用条件语句或循环。
  3. 多个 React 实例: 验证应用程序中是否只有一份 React 副本。

问题排查:

在提供的代码示例中,问题可以追溯到类组件的 componentWillMount 方法。类组件不支持 React hooks。

解决方案:

要解决此问题并使用 hooks,应将组件转换为功能组件。以下是更新后的代码:

import React, { useState, useEffect } 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
  }
}));

const Allowance = () => {
  const [allowances, setAllowances] = useState([]);
  const classes = useStyles();

  useEffect(() => {
    fetch('http://127.0.0.1:8000/allowances')
      .then(data => data.json())
      .then(data => setAllowances(data));
  }, []);

  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>
          {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 组件中出现“无效的 Hook Call”错误以及如何修复它?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn