javascript - 渲染嵌套组件ReactJS

Question

我的数据采用以下格式:

const INITIAL_STATE = {
expenses: {
    byId: {
        k948zpnp: {
            id: 'k948zpnp',
            category: 'other',
            description: 'book',
            amount: '25',
            timeSpent: '2.5',
            time: '2020-04-21'
        }
    },
    allIds: ['k948zpnp']
  }
}

我想要做的是渲染包含日期的组件 - 因此具有相同时间的所有子组件(SingleItem)都分组在其中。

<ExpensesByDay date={time)>
   <SingleItem restOfData={...} />
</ExpensesByDay>

我按时间属性和最终对象对数据进行分组:

   budgetByDay = {
    2020-04-11: (4) [{…}, {…}, {…}, {…}],
    2020-04-20: [{…}],
    2020-04-21: (2) [{…}, {…}]
    }

然后我创建一个包含所有日期的数组并执行以下操作:

{datesArray.map(date =>
                budgetByday[date].map(item => (
                    <DailyBudget date={date}>
                        <SingleItem
                            keyAndRest={...}
                        />
                    </DailyBudget>
                ))
            )}

但这行不通。我认为我的方法可能从一开始就是不正确的，我可能不需要按日期分组我的费用。您将如何完成这项任务？

Answer 1

在您的代码中SingleItem嵌套在 DailyBudget 内。这是不正确的，因为在您的 DailyBudget 中实现它不会渲染任何 children成分。而且，你不能放置 <tr>在另一个里面<tr>元素。因此，这里是更正后的代码，应该可以按您的预期工作:

    {datesArray.map((date) =>
      <>
        <DailyBudget date={date} key={date} />
        {budgetByday[date].map((dateItem) => <SingleItem {...dateItem} /> )}
      </>
    )}