Pourquoi est-ce que je reçois l'erreur « Appel de hook invalide » dans React ?

Comprendre l'erreur « Appel de hook invalide »

Dans React, l'erreur « Appel de hook invalide. Les hooks ne peuvent être appelés qu'à l'intérieur du corps d'un composant fonctionnel" indique qu'un hook React est utilisé de manière incorrecte. Les hooks sont des fonctions spéciales qui donnent accès à l'état de React et à d'autres fonctionnalités, mais ils doivent être utilisés dans des composants fonctionnels, et non dans des composants de classe.

Résoudre l'erreur pour les composants de classe

L'exemple de code fourni utilise un composant de classe (allocation), qui n'est pas compatible avec les hooks React. Pour résoudre cette erreur, vous devez convertir le composant de classe en composant fonctionnel. Voici le code mis à jour :

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

Dans ce composant fonctionnel, les hooks useState et useEffect sont correctement utilisés dans le corps du composant. Vous devez remplacer le composant de classe d'origine par ce composant fonctionnel pour résoudre l'erreur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!