為什麼我在 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中文網其他相關文章！