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

Fehler „Ungültiger Hook-Aufruf“ in React-Komponente beheben

React-Hooks bieten eine leistungsstarke Möglichkeit, mit dem Komponentenstatus zu interagieren, aber sie kommen mit bestimmten Regeln, die befolgt werden müssen. Ein häufiger Fehler, der auftreten kann, ist „Ungültiger Hook-Aufruf“. Dies tritt auf, wenn Hooks außerhalb des Körpers einer Funktionskomponente aufgerufen werden.

Fehlerursachen:

1. Nicht übereinstimmende React-Versionen: Stellen Sie sicher, dass Sie über kompatible Versionen von React und dem Renderer verfügen (z. B. React DOM).
2. Hook-Regeln brechen: Hooks müssen während jedes Renderzyklus in der gleichen Reihenfolge aufgerufen werden und können nicht innerhalb aufgerufen werden Bedingte Anweisungen oder Schleifen.
3. Mehrere Instanzen von React:Stellen Sie sicher, dass nur eine Kopie von React in der Anwendung vorhanden ist.

Behebung des Problems :

Im bereitgestellten Codebeispiel kann das Problem auf die Methode „componentWillMount“ der Klassenkomponente zurückgeführt werden. React-Hooks werden in Klassenkomponenten nicht unterstützt.

Lösung:

Um dieses Problem zu beheben und Hooks zu verwenden, sollte die Komponente in eine funktionale Komponente konvertiert werden. Hier ist der aktualisierte Code:

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

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

  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;

Zusätzlicher Hinweis:

In einigen Fällen kann das Problem auch durch die Verwendung einer veralteten Version von React-Scripts verursacht werden. Eine Aktualisierung der Version auf die neueste Version könnte das Problem möglicherweise beheben.

Das obige ist der detaillierte Inhalt vonWarum erhalte ich in meiner React-Komponente 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!