Comme dans tout développement d’un programme informatique, il est garanti que vous rencontrerez des problèmes et des messages d’erreur tot ou tard, dans cet article nous listerons les problèmes et erreurs qui peuvent survenir lorsque vous écrivez du code en utilisant le Framework React ainsi que les solutions respectives liées à ses problèmes
Problème: “react-scripts is not recognized as an internal or external command”
Il s’agit d’un problème dû à un des paquets react-scripts
Il peut être dû à l’absence du module dans votre projet. Pour résoudre ce problème, grace à l’invite de commande tapez le code « npm install react-scripts »
Le problème peut aussi être due à une mauvaise installation du projet, pour le résoudre, utilisez la commande « rm –rf node_modules && npm install »
Problème lié aux hooks
Présent dès la version 16.8 de React, ils améliorent l’utilisation du code cependant il faut faire attention à leur utilisation car on peut y rencontrer de nombreuses erreurs :
Problème qui renvoie le message d’avertissement suivant « missing dependency warning » : Ceci est due au fait qu’une méthode est utilisé dans un Hook useEffect() tandis qu’elle est déclarée en dehors du hook
Pour résoudre ce problème vous pouvez appliquer l’une des solutions suivantes :
- il faut mettre directement la méthode à l’intérieur du Hook useEffect
- Mettre le code de la méthode dans le Hook useCallback() lors de sa définition à l’extérieur de useEffect
Problème : “warning :Each child in a list should have unique key prop “
Cela survient lorsque vous essayer de rendre un composant présent dans un tableau sans que celui-ci ne soit vue comme unique grâce au key prop, pour résoudre ce problème, il suffit d’ajouter un key prop au composant le plus externe du JSX de manière à ce que chaque valeur prise par le key prop soit unique
Problème : “Prevent usage of Array index in keys “
Cela se produit souvent lorsqu’on attribut l’index du tableau au key prop, la solution ici consiste a utiliser des chaines de caractères dont leur valeur ne sera pas affecté par la suppression d’un element du tableau
Problème: “React hook useXXX is called conditionally ….”
Ceci intervient lorsqu’une déclaration d’un hook dépend d’une condition. Pour résoudre cela il suffit d’initialiser toutes les déclarations de hook au début du composant sans faire en sorte qu’elles dépendent d’une condition
Problème : “React hook has a missing dependency: ‘XXX’ … “
Ce problème survient lorsque les variables extérieures au Hook susceptible de changer et utilisées dans celui-ci ne sont pas inclues dans le tableau de ses dépendances, pour palier à ce problème, il faudrait inclure dans le tableau des dépendances des Hook toutes les variables extérieures au hook susceptible de changer
Problème: “Too many re-renders. React limits the number …”
Ceci surgi lorsqu’une boucle infinie est générée, et peut donc découlé lorsqu’un composant déclenche beaucoup de rendus par conséquent trop de mises à jour d’état sont déclenchées en très peu de temps. Si donc vous avez rencontré cela, veuillez à ce qu’aucune mise à jour d’état (setState ou quelque chose de semblable) n’est effectué directement à l’intérieur (racine) de votre composant, ou qu’un tableau de dépendance d’un Hook n’est pas définie ou mal utilisé
Problème : Adjacent JSX elements must be wrapped …
const MyComponent = () => (
<div><FirstComponent /></div>
<div><SecondComponent /></div>
);Ce problème intervient lorsque plusieurs composants JSX renvoyés par un composant ne sont pas envelopper par une balise englobante, la résolution de ce problème consiste à mettre tous les éléments JSX à renvoyés dans une balise qui les enveloppera.
const MyComponent = () => (
<React.Fragment>
<div><FirstComponent /></div>
<div><SecondComponent /></div>
</React.Fragment>
);Découvrez également :
- 10 choses à savoir absolument lorsque vous débutez sur Vue JS
- Les meilleurs plugins pour sécuriser votre site WordPress
- Les meilleurs Framework pour le développement d’application hybride