Warum erhalte ich in React den Fehler „Ungültiger Hook-Aufruf“?

Den Fehler „Ungültiger Hook-Aufruf“ verstehen

In React wird der Fehler „Ungültiger Hook-Aufruf“ angezeigt. Hooks können nur innerhalb von aufgerufen werden Hauptteil einer Funktionskomponente“ zeigt an, dass ein React-Hook falsch verwendet wird. Hooks sind spezielle Funktionen, die Zugriff auf den React-Status und andere Funktionen ermöglichen. Sie müssen jedoch innerhalb funktionaler Komponenten und nicht innerhalb von Klassenkomponenten verwendet werden.

Beheben des Fehlers für Klassenkomponenten

Das bereitgestellte Codebeispiel verwendet eine Klassenkomponente (allowance), die nicht mit React-Hooks kompatibel ist. Um diesen Fehler zu beheben, sollten Sie die Klassenkomponente in eine Funktionskomponente konvertieren. Hier ist der aktualisierte Code:

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

In dieser Funktionskomponente werden die Hooks „useState“ und „useEffect“ korrekt im Hauptteil der Komponente verwendet. Sie sollten die ursprüngliche Klassenkomponente durch diese Funktionskomponente ersetzen, um den Fehler zu beheben.

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