Warum erhalte ich in React den Fehler „Ungültiger Hook-Aufruf' und wie kann ich ihn beheben?

Ungültiger Hook-Aufruf in React: Verständnis des Problems und der Lösung

Der Fehler „Ungültiger Hook-Aufruf. Hooks können nur innerhalb von aufgerufen werden „Körper einer Funktionskomponente“ entsteht, wenn Hooks in einer React-Anwendung nicht ordnungsgemäß aufgerufen werden. Dieser Fehler tritt typischerweise aus einem der folgenden Gründe auf:

• Nicht übereinstimmende React- und Renderer-Versionen:Stellen Sie sicher, dass die Versionen von React und dem Renderer (z. B. React DOM) übereinstimmen.
• Verstoß gegen die Regeln von Hooks: Halten Sie sich an die Richtlinien für die Verwendung von Hooks in Funktionskomponenten, z. B. rufen Sie Hooks nur innerhalb von Funktionskomponenten auf und vermeiden Sie, sie mehr als einmal pro Komponente aufzurufen.
• Mehrere Kopien von React: Vermeiden Sie mehrere Instanzen von React in einer einzigen Anwendung, da dies zu Konflikten führen kann.

Im bereitgestellten Codeausschnitt tritt der Fehler aufgrund von Hooks auf (insbesondere der useState-Hook) werden innerhalb einer Klassenkomponente verwendet. Dies ist falsch, da Hooks ausschließlich für die Verwendung in Funktionskomponenten konzipiert sind.

Um das Problem zu beheben, sollte der Code wie unten gezeigt als Funktionskomponente umgeschrieben werden:

<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>

Durch Konvertierung Wenn Sie die Komponente in eine funktionale Komponente umwandeln, kann der Hook korrekt verwendet werden, wodurch der Fehler „Ungültiger Hook-Aufruf“ behoben wird.

Das obige ist der detaillierte Inhalt vonWarum erhalte ich in React den Fehler „Ungültiger Hook-Aufruf' und wie kann ich ihn beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!