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

Ungültiger Hook-Aufruffehler in React: Eine umfassende Anleitung

Beim Versuch, Daten in einer Tabelle mit React anzuzeigen, kann der Fehler auftreten „Ungültiger Hook-Aufruf. Hooks können nur innerhalb des Hauptteils einer Funktionskomponente aufgerufen werden.“ Dieser Fehler tritt aus verschiedenen Gründen auf und das Verständnis, wie er behoben werden kann, ist für die React-Entwicklung von entscheidender Bedeutung.

Ursachen des Fehlers

1. Nicht übereinstimmende React-Versionen : Stellen Sie sicher, dass Sie die richtige Version von React und den zugehörigen Renderer installiert haben. Versionsinkonsistenzen können zu diesem Fehler führen.
2. Verstoß gegen Hook-Regeln: React-Hooks folgen bestimmten Regeln, z. B. dürfen sie nur innerhalb funktionaler Komponenten aufgerufen werden. Stellen Sie sicher, dass Sie diese Konventionen einhalten.
3. Mehrere React-Instanzen: Stellen Sie sicher, dass Ihre Anwendung nur eine Instanz von React enthält. Mehrere Instanzen können Konflikte verursachen und diesen Fehler auslösen.

Beispiel mit Material-UI

Betrachten Sie das folgende Codebeispiel:

<code class="javascript">import React, { Component } 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
  }
}));

class allowance extends Component {
  constructor() {
    super();
    this.state = {
      allowances: []
    };

  }

  componentWillMount() {
    fetch('http://127.0.0.1:8000/allowances')
      .then(data => {
        return data.json();
      })
      .then(data => {
        this.setState({
          allowances: data
        });
        console.log('allowance state', this.state.allowances);
      });
  }

  render() {
    const classes = useStyles();
    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> {
            this.state.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>

Lösung

In diesem Beispiel tritt der Fehler auf, weil die Komponente als Klassenkomponente definiert ist. React-Hooks, die in späteren React-Versionen eingeführt wurden, können nur innerhalb funktionaler Komponenten verwendet werden. So beheben Sie das Problem:

1. Konvertieren Sie die Klassenkomponente in eine Funktionskomponente.
2. Verwenden Sie Hooks anstelle von Methoden, um den Status zu verwalten und Nebenwirkungen auszuführen.

Weitere Unterstützung

Weitere Anleitungen zur Behebung des Fehlers „Ungültiger Hook-Aufruf“:

• [React Documentation](https://reactjs.org/ docs/hooks-rules.html)
• [Deklarative Einrichtung](https://blog.logrocket.com/declarative-setup-of-front-end-typescript-and-react/)
• [npm Link Alternative Command](https://blog.bitsrc.io/an-alternative-npm-link-command-a49f7a92bfd4)

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