Pourquoi est-ce que je reçois une erreur « Invalid Hook Call » dans mon composant React et comment puis-je la corriger ?

Résolution de l'erreur « Appel de hook invalide » dans le composant React

Les hooks React offrent un moyen puissant d'interagir avec l'état du composant, mais ils viennent avec certaines règles à respecter. Une erreur courante qui peut survenir est « Appel de hook non valide ». Cela se produit lorsque les hooks sont appelés en dehors du corps d'un composant de fonction.

Causes de l'erreur :

1. Versions React incompatibles : Assurez-vous d'avoir des versions compatibles de React et du moteur de rendu (par exemple, React DOM).
2. Règles de rupture : Les hooks doivent être appelés dans le même ordre pendant chaque cycle de rendu et ne peuvent pas être appelés à l'intérieur. instructions ou boucles conditionnelles.
3. Instances multiples de React : Vérifiez qu'il n'y a qu'une seule copie de React dans l'application.

Dépannage du problème :

Dans l'exemple de code fourni, le problème peut être attribué à la méthode componentWillMount du composant de classe. Les hooks React ne sont pas pris en charge dans les composants de classe.

Solution :

Pour résoudre ce problème et utiliser des hooks, le composant doit être converti en composant fonctionnel. Voici le code mis à jour :

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;

Remarque supplémentaire :

Dans certains cas, le problème peut également être dû à l'utilisation d'une version obsolète des scripts de réaction. La mise à jour de la version vers la dernière version pourrait potentiellement résoudre le problème.

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!