PROBLEMES COURAMMENT RENCONTRES AVEC LE FRAMEWORK REACT JS ET LEURS SOLUTIONS

     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