嵌套返回html内的render

Question

所以我在这里试着解释一下情况。

概述：我得到一个交易数组。然后我根据月份对这些交易进行分组。每个项目的键在 groupedTransactions 对象是一个月份，如[02-2012]等，键值是一个包含该月所有事务的对象数组。现在我想要的是，在里面的render方法中的 <tbody> 我调用了一个函数，该函数将返回：表中有一行写着 "3月份的交易"，后面是所有发生的交易。后面是所有发生的交易。

到目前为止的代码：在函数组件的渲染或返回中，我应该说。

      <tbody>
         <tr>
           <th>Some heading</th>
         </tr>

        {!isLoading?

        accountSummary(account.transactions,account.balances.current )
        :''
      }
 </tbody>

现在在accountSummary方法中。

 const accountSummary = (accTx,currentBalance)=>{
        console.log('called account summary');
        let groupedTransactions = groupTransactionsByMonth(accTx);

        return Object.keys(groupedTransactions).map((month,index)=>{
                console.log('called for loop');
                console.log(month);
                return(

                        <tr>
                            <td style={{fontWeight:'bold',fontSize:'1em'}}>Transactions in the Month of {moment(month).format("MMMM")}</td>
                            {loopOverGroupedTxByMonth(month,groupedTransactions)}
                        </tr>

                )

        })
    };

最后在 loopOverGroupedTxByMonth(month,groupedTransactions) 方法。

    const loopOverGroupedTxByMonth = (month,groupedTransactions) =>{
       return  groupedTransactions[month].forEach(function (transaction, index) {
            console.log(transaction)
            //Lot of variables here that are used below so no need for that 
            return (
                <tr>
                    <td><Moment format="LL">{transaction.date}</Moment></td>
                    <td>{transaction.original_description}</td>
                    <td>{displayInflow ? displayInflow : '---'}</td>
                    <td>{displayOutflow ? displayOutflow : '---'}</td>

                </tr>
            );
        });
    }

所以你现在可以猜到，accountSummary方法确实返回了 "3月的交易 "和 "4月的交易"，但它并没有返回中间的任何东西。三月 "和 "四月"，但是它并没有返回中间的任何东西，而这些东西应该由 loopOverTxByMonth 方法。有趣的是，在控制台中，一切都很好。我得到一个月，然后它的所有交易，然后另一个月，等等。所以，我在这里做错了什么，我知道它有点复杂，但请忍受我.谢谢你，我可以回答任何问题，如果你需要进一步的清晰度或代码。

Answer 1

const loopOverGroupedTxByMonth = (month,groupedTransactions) =>{
       return  groupedTransactions[month].map(function (transaction, index) {
            console.log(transaction)
            //Lot of variables here that are used below so no need for that 
            return (
                <tr>
                    <td><Moment format="LL">{transaction.date}</Moment></td>
                    <td>{transaction.original_description}</td>
                    <td>{displayInflow ? displayInflow : '---'}</td>
                    <td>{displayOutflow ? displayOutflow : '---'}</td>

                </tr>
            );
        });
    }

替换 forEach 与 map 并看到了神奇。