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

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中文网其他相关文章！