为什么我在 React 中收到'无效的钩子调用”错误以及如何修复它？-js教程-PHP中文网

为什么我在 React 中收到'无效的钩子调用”错误以及如何修复它？

Susan Sarandon

发布： 2024-11-02 15:46:02

原创

894 人浏览过

Why am I getting the

React 中无效的 Hook 调用：了解问题和解决方案

错误“无效的 hook 调用。Hooks 只能在内部调用”当在 React 应用程序中不正确地调用钩子时，就会出现“函数组件的主体”。此错误通常由以下原因之一导致：

React 和渲染器版本不匹配： 确保 React 和渲染器（例如 React DOM）的版本对齐。
打破 Hook 规则： 遵守在函数组件中使用 Hook 的准则，例如仅在函数组件内部调用 Hook，并避免每个组件多次调用它们。
React 的多个副本：避免在单个应用程序中拥有多个 React 实例，这可能会导致冲突。

在提供的代码片段中，由于钩子而发生错误（特别是 useState 挂钩）在类组件中使用。这是不正确的，因为钩子是专门为函数组件中使用而设计的。

要解决这个问题，应该将代码重写为函数组件，如下所示：

<code class="javascript">import React, { useState } 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 classes = useStyles();
  const [allowances, setAllowances] = useState([]);

  const fetchAllowances = async () => {
    const res = await fetch('http://127.0.0.1:8000/allowances');
    const data = await res.json();
    setAllowances(data);
  };

  useEffect(() => {
    fetchAllowances();
  }, []);

  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;</code>

登录后复制

通过转换将组件转换为功能组件，可以正确使用钩子，解决“无效的钩子调用”错误。

以上是为什么我在 React 中收到'无效的钩子调用”错误以及如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！