for-inループとマップに反応する

Question

私は反応型のアプリケーションに取り組んでいます。問題が発生しているので、誰かができるのであれば本当に助けに感謝します。

データを日付別にグループ化していますが、この形式のデータを含むオブジェクトがあります{dd/mm/yyyy:[data,data], dd/mm/yyyy:[data,data]}。

私はオブジェクトをループし、次に配列をループしてこれらをレンダリングするためにforループを実行していますが、最初のキーと値のペアでレンダリングを停止するようですが、マップの前のreturn文はレンダリングされていないので、レンダリング関数は機能していないようです。

ここに私のコードですが、どんな助けもありがとうございます。

ありがとうございました！

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は何も返しません。したがって、結果はundefinedになります。

代わりObject.keys().mapをお試しください：

 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> 
       ) 

      }) 
     }