渲染嵌套組件 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>

我按時間屬性和最終的 object 對數據進行分組：

   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是 object，因此您不能直接使用Array.prototype.map()方法。 相反，您可以提取其條目和 map 那些：

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

您可以在這里查看您的沙盒的更新版本。