Question

我的数据格式如下：

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

我想做的是渲染包含日期的Component-因此，我所有具有相同时间的子组件（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} /> )}
      </>
    )}

Answer 2

您的budgetByday是一个对象，因此不能直接使用Array.prototype.map()方法。相反，您可以提取其条目并映射这些条目：

<tbody>
        {Object.entries(budgetByday).map(([date, items], key) => [
          <DailyBudget date={date} key={key} />,
          ...items.map(({ id, ...rest }) => <SingleItem key={id} {...rest} />)
        ])}
</tbody>

您可以签出沙箱over here的更新版本。

渲染嵌套组件ReactJS

2 个答案: