為什麼我在 React 中收到「無效的 Hook Call」錯誤？

理解「無效的Hook 呼叫」錯誤

在React 中，錯誤「無效的Hook 呼叫」錯誤

在React 中，錯誤「無效的Hook 呼叫。Hooks 只能在函數元件的主體」表示React hook 的使用不正確。鉤子是提供對 React 狀態和其他功能的存取的特殊函數，但它們必須在功能元件中使用，而不是類別元件。

解決類別元件的錯誤

<code class="javascript">import React, { useState, useEffect, Fragment } 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([]);

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

  return (
    <Fragment>
      <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>
    </Fragment>
  );
};

export default Allowance;</code>

提供的程式碼範例使用了類別元件（allowance），它與React hooks不相容。要解決此錯誤，您應該將類別元件轉換為函數元件。以下是更新後的程式碼：

在此功能元件中，useState 和 useEffect 掛鉤在元件主體中正確使用。你應該用這個功能元件取代原來的類別元件來解決錯誤。

以上是為什麼我在 React 中收到「無效的 Hook Call」錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！