react · JavaScript
Le message
Too many re-renders. React limits the number of renders to prevent an infinite loop.
Ce que cela veut dire
Un rendu a modifié l'état, cet état a déclenché un autre rendu, et React a coupé la boucle pour éviter l'infini. C'est presque toujours une fonction appelée là où il fallait la passer : onClick={setOpen(true)} s'exécute à chaque rendu, il faut écrire onClick={() => setOpen(true)}. Les autres formes courantes sont la modification d'état directement dans le corps du rendu, et un useEffect dont la liste de dépendances contient la valeur qu'il met à jour. Déplacez les changements d'état dans un gestionnaire d'événement ou un useEffect, et si la valeur peut être calculée pendant le rendu, demandez-vous si elle doit être un état.
Le correctif
Pas de commande en une ligne ici. L’explication dit où regarder.
- Émis par
- react
- JavaScript
- 15
Les erreurs du navigateur et de Node disent d'ordinaire ce qui a cassé et non pourquoi la valeur est devenue telle — vous avez lu undefined, ce n'était pas une fonction, ce n'était pas du JSON — l'endroit à corriger se trouve donc en amont de la ligne qui a levé l'erreur, et faire taire cette seule ligne avec ?. et des valeurs par défaut fait revenir le même problème plus loin, sous une forme plus difficile à reconnaître.
Lire un message d’erreur
- Lisez à partir de la première ligne. Plus on descend, plus il s’agit des entrailles de l’outil ; la cause est généralement en haut.
- S’il y a un fichier et un numéro de ligne, commencez là — pas la première image de la pile, mais la ligne la plus haute qui nomme un fichier de vous.
- Cherchez le message tel quel, mais retirez d’abord vos chemins et vos noms de variables : c’est cela qui empêche la correspondance.
- La même situation se formule autrement selon la version de l’outil. Si les résultats sonnent faux, ajoutez le numéro de version.
- Avant de coller un correctif, vérifiez ce qu’il jette. Certains sont irréversibles.
Questions fréquentes
Q. Que veut dire « Too many re-renders. React limits the number of renders to prevent an infinite loop. » ?
Un rendu a modifié l'état, cet état a déclenché un autre rendu, et React a coupé la boucle pour éviter l'infini. C'est presque toujours une fonction appelée là où il fallait la passer : onClick={setOpen(true)} s'exécute à chaque rendu, il faut écrire onClick={() => setOpen(true)}. Les autres formes courantes sont la modification d'état directement dans le corps du rendu, et un useEffect dont la liste de dépendances contient la valeur qu'il met à jour. Déplacez les changements d'état dans un gestionnaire d'événement ou un useEffect, et si la valeur peut être calculée pendant le rendu, demandez-vous si elle doit être un état.
Q. Comment le corriger ?
Pas de commande en une ligne. L’explication ci-dessus dit où regarder.
Q. Quel outil émet cela ?
react. Cela relève de JavaScript, et le message compte 14 mots.