Réagir en boucle et carte

Question

Je travaille sur une application de réaction et je suis confrontée à un problème, donc j'apprécierais vraiment de l'aide si quelqu'un peut.

Je regroupe mes données par date, et j'ai un objet qui contient les données dans ce format {dd/mm/yyyy:[data,data], dd/mm/yyyy:[data,data]}. Donc je fais une boucle pour for pour traverser l'objet, puis une carte pour faire une boucle dans les tableaux, puis les restituer, mais il semble arrêter le rendu à la première paire valeur/clé, je suppose que c'est parce que la déclaration de retour avant la carte, mais la fonction de rendu ne semble pas fonctionner sans elle.

Voici mon code, toute aide est très appréciée.

merci!

export default class ExpenseMain extends React.Component{ 

    renderStuff(){ 
     var expenses = this.props.expenses 
     if(Object.keys(expenses).length > 0){ 
      for(var key in expenses){ 
       return expenses[key].map((ele,i)=>{ 
        return (
         <div  
          className = "expensesLoop" 
          key = {i}> 
          <ExpenseItem 
           expense = { ele } 
           removeExpense = { this.props.removeExpense } 
           updateExpense = { this.props.updateExpense } 
          /> 
          <hr/> 
         </div> 
        ) 

       }) 
      } 
     } 
    } 
    render(){ 
     return <div>{this.renderStuff()} </div> 
    } 
} 

Answer 1

for ne renvoie rien. Ainsi, le résultat sera undefined.

Essayez un Object.keys().map à la place:

 Object.keys(expenses).map(key => { 
      return expenses[key].map((ele,i)=>{ 
       return (
        <div  
         className = "expensesLoop" 
         key = {i}> 
         <ExpenseItem 
          expense = { ele } 
          removeExpense = { this.props.removeExpense } 
          updateExpense = { this.props.updateExpense } 
         /> 
         <hr/> 
        </div> 
       ) 

      }) 
     }