地图中的JavaScript地图

Question

我目前正在用React和JavaScript构建一个预算应用程序。现在我可以打印如下所示的成本表。

已用$>可用100

名称		预算	已使用%
食品	300	0
流媒体服务	600	600

最简单的方法就是按照你的意愿执行。在第一个映射中的标记后面写另一个映射来渲染子项行。类似这样的东西：

<tbody>
{expenses.budgetedAmounts
.sort((a, b) => {
return a.department < b.department;
})
.map((item, index) => (
<><tr
key={index}
>
<td>
{item.name}
</td>
<td>
{item.budgetedExpense}
</td>
<td>
{item.actualExpense} 
</td>
<td>
{item.percentageUsed} 
</td>
<td>
{item.availableExpense}
</td>
</tr>
{item.nestedItems.map((nested, secondIndex) =>   <tr>
<td> {nested.name}</td>  <td> {nested.price} </td>
</tr>)}</>
))}
</tbody>

您可以先展平您的数组，然后进行最后的映射，采取一些预防措施，使未定义的属性不会导致undefined输出：

<tbody>
{expenses.budgetedAmounts
.sort((a, b) => a.department < b.department)
.flatMap(a => [a, ...a.nestedItems])
.map((item, index) => (
<tr key={index}>
<td>{item.name}</td>
<td>{item.budgetedExpense ?? item.price}</td>
<td>{item.actualExpense ?? ""}</td>
<td>{item.percentageUsed ?? ""}</td>
<td>{item.availableExpense ?? ""}</td>
</tr>
))}
</tbody>

注意，index现在不再与非平坦阵列中的原始索引相对应。我假设它只是作为一个唯一的引用，但如果不是，您可能需要添加一些代码，以便仍然可以访问原始索引。

试试这个

<tbody>
{ budgetedAmounts.map((item,index)=>{
return(
<> 
<tr key={index + "b"}> 
<td>{item.name}</td>
<td>{item.budgetedExpense}</td>
<td>{item.actualExpense}</td>
<td>{item.percentageUsed}</td>
<td>{item.availableExpense}</td>
</tr>
{ item.subItem && item.subItem.map((subItem,subIndex)=>{
return(
<tr key={item.id + " __ "+subIndex}>
<td>{subItem.name}</td>
<td>{subItem.budgetedExpense}</td>
<td>{subItem.actualExpense}</td>
<td>{subItem.percentageUsed}</td>
<td>{subItem.availableExpense}</td>
</tr>
)
})
}
</>
)
})
}
</tbody>