2017-09-26 3 views
1

Sans y compris le code encore, je me demande si quelqu'un a couru dans un problème où vous:Erreur dans le composant React provoquant le ré-rendu de l'application, ce qui provoque une boucle infinie. Pourquoi?

  • ont une composante qui est enveloppé dans connect et, dans mon cas apollo-client
  • ont des composants enfants aussi enveloppé dans connect que faire une dépêche à componentWillMount
  • Throw une erreur dans un composant enfant
  • Obtenez une boucle infinie

La situation dans laquelle je suis est que tout enfant qui lance une erreur provoque à nouveau le composant parent render et tous les enfants semblent exécuter componentWillMount, mais n'exécutent pas componentWillUnmount.

L'erreur n'est pas consignée et n'apparaît pas dans la console tant que la pile d'appels n'a pas débordé. Cela les amène tous à se reconnecter à Redux, à répartir l'action et à relancer l'erreur car ils se remontent, ce qui provoque la boucle.

Je peux essayer de repro, mais cela prendra un peu de temps, je me demandais juste si quelqu'un a rencontré un problème similaire qui pourrait offrir un endroit pour regarder.

+0

N'a pas utilisé Apollo et ne peux pas dire que je reconnais le problème. Mais à des fins de débogage, j'essaierai probablement de faire une vérification dans componentWillMount avant de renvoyer l'action, et de voir si je pourrais casser la boucle et espérer que l'erreur ne se perdrait pas de cette façon. Ou utilisez des points d'arrêt dans 'componentWillMount' pour pouvoir l'arrêter à tout moment. Et utilisez des outils comme Redux devtools pour voir quelles actions ont été envoyées et si elles contiennent la charge utile attendue, etc. https://github.com/zalmoxisus/redux-devtools-extension – jonahe

Répondre

0

Vous ne devez pas envoyer d'actions dans componentWillMount. Tout ce qui est considéré comme mutable doit être fait dans componentDidMount. componentWillMount est similaire à un constructeur. Le composant n'a pas été monté. Le composant ignore tout état (sauf si vous spécifiez) mais cet état n'est pas rempli tant que le composant n'est pas réellement monté, ce qui arrive dans componentDidMount. Idéalement, vous devriez vous en tenir au constructeur et ne pas vraiment utiliser componentWillMount. Pour tous les appels API ou dispatching, vous devez conserver ceux dans cDM

+0

Sans voir de code, je ne peux pas vous donner le meilleure réponse. Ce que j'ai dit ci-dessus est toujours vrai mais cela ne résoudra probablement qu'une partie de votre problème. En outre, à titre de référence, React documente également cela. Essayez de croiser ceci avec componentDidMount, trouvé un peu plus bas sur cette page. https://reactjs.org/docs/react-component.html#componentwillmount –

0

Clayton a raison; ComponentWillMount est en quelque sorte un anti-modèle, en dépit d'avoir été le chemin et la vérité. Vous voulez probablement utiliser ComponentDidMount.

Cependant, puisque vous avez mentionné le lancement, cela ne vaut rien que React 16 ait un componentDidCatch lifecycle hook. Cela vous permet d'attraper l'erreur et le manipuler réagissez:

limites d'erreur sont React composants qui attrapent des erreurs JavaScript partout dans leur arborescence des composants de l'enfant, connectez-vous ces erreurs, et d'afficher une interface utilisateur de repli

En théorie, cela devrait vous permettre de gérer l'erreur et de court-circuit connect.