web-dev-qa-db-fra.com

Pourquoi composantDidMount est appelé plusieurs fois dans react.js & redux?

J'ai lu que componentDidMount n'est appelé qu'une fois pour le rendu initial, mais je vois qu'il est rendu plusieurs fois.

Il semble que j'ai créé une boucle récursive.

  • composantDidMount envoie l'action pour récupérer les données
  • à la réception des données, il déclenche une action de réussite pour stocker les données dans l'état redux.
  • un composant parent réactif est connecté au magasin redux et a mapStateToProps pour l'entrée qui vient d'être modifiée à l'étape précédente
  • parent rend les composants enfants (qui sont sélectionnés par programme via variable)
  • le composantDidMount du composant enfant est appelé à nouveau
  • il dépose une action pour récupérer des données

Je pense que c'est ce qui se passe. J'ai peut-être tort.

Comment puis-je arrêter la boucle?

Voici le code pour le rendu par programme des composants enfants.

 function renderSubviews({viewConfigs, viewConfig, getSubviewData}) {

   return viewConfig.subviewConfigs.map((subviewConfig, index) => {
     let Subview = viewConfigRegistry[subviewConfig.constructor.configName]
     let subviewData = getSubviewData(subviewConfig)

     const key = shortid.generate()
     const subviewLayout = Object.assign({}, subviewConfig.layout, {key: key})
     return (
       <div
         key={key}
         data-grid={subviewLayout}
         >
         <Subview
           {...subviewData}
           />
       </div>
     )
   })
 }
reactjsreduxreact-redux
26
eugene

Une occurrence de composant ne sera montée et démontée qu'une fois lorsqu'elle sera supprimée. Dans votre cas, il est supprimé et recréé.

Le but de la key prop est d'aider React trouver la version précédente du même composant. Ainsi, il peut mettre à jour un composant précédent avec de nouveaux accessoires plutôt que d'en créer une nouvelle .

React peut souvent fonctionner correctement sans clé, la seule exception étant une liste d'éléments. Il veut une clé pour pouvoir garder la trace lorsque des éléments sont réarrangés, créés ou supprimés.

Dans votre cas, vous indiquez explicitement à React que votre composant est différent du précédent. Vous attribuez une nouvelle clé à chaque rendu. Cela force React = traiter l'instance précédente comme ayant été supprimée.Tous les enfants de ce composant sont également démontés et démantelés.

Ce que vous devez faire n’est pas (toujours) générer une clé au hasard. Les clés doivent toujours être basées sur l'identité des données affichées par un composant. Si ce n'est pas un élément de la liste, vous n'avez probablement pas besoin d'une clé. S'il s'agit d'un élément de liste, il est préférable d'utiliser une clé dérivée de l'identité de la donnée, telle qu'une propriété ID, ou peut-être une combinaison de plusieurs champs.

Si générer une clé aléatoire aurait été la bonne chose à faire, React se serait occupé de cela pour vous.

Vous devez placer votre code de récupération initial à la racine de votre arbre React, généralement App. Ne le mettez pas dans un enfant aléatoire. Au moins, vous devriez le mettre dans un composant qui existe pour la durée de vie de votre application.

La principale raison de l'insérer dans componentDidMount est qu'il ne s'exécute pas sur le serveur, car les composants côté serveur ne sont jamais montés. Ceci est important pour le rendu universel. Même si vous ne le faites pas maintenant, vous le ferez peut-être plus tard, et vous y préparer est une pratique exemplaire.

53
DDS