Html 反应表数据逻辑结构

我想问一下，是否有更简单的方法来显示数据。 这是我的虚拟数据：

const data = [
  {
    business: false,
    utilization: {
      ActiveParticipantsPercent: 55.55,
      SeparatedVestedParticipants: 0,
      ParticipantsWithBenefitAccount: 8,
      AverageActiveParticipants: 5,
      TotalContributions: 23890
    },
    year: 2018
  },
  {
    business: true,
    utilization: {
      ActiveParticipantsPercent: 82.4,
      SeparatedVestedParticipants: 1.94,
      ParticipantsWithBenefitAccount: 95393,
      AverageActiveParticipants: 0.01,
      TotalContributions: 257094.79
    },
    year: 2018
  }
];

我想在两列中显示数据——一列是2018年的虚假商业价值，另一列是2018年的真实商业价值。 对于它们中的每一个，我想显示利用率字段的数据

我准备了sandbox来看看我是如何做到的，但我认为可能有更简单的方法来做到这一点并节省资源：

---

有什么建议吗？或者我应该这样保存吗？

您可以在

利用率

对象（行）和行内部之间进行迭代，在数据数组（单元格）之间进行迭代，而不是对每个

表行

进行硬编码，然后在其中进行迭代

例如：

// basically the number of rows based on utilization properties plus the header (+1)
let rowCount = Object.keys(data[0].utilization).length + 1;

<TableContainer component={Paper}>
  <Table size="small" aria-label="a dense table">
    <TableBody>
      {[...Array(rowCount)].map((_, i) => {
        let current_utilization_key =
          i === 0 ? "Field" : Object.keys(data[0].utilization)[i - 1];

        return (
          <TableRow key={i}>
            <TableCell>{current_utilization_key}</TableCell>
            {data.map((el, j) => {
              let cell_content = "";

              // just some condition statements to determine if cell is to be a header or if business evaluates to true
              if (i === 0) {
                if (el.business === true) {
                  cell_content = "Business for " + el.year;
                } else {
                  cell_content = el.year;
                }
              } else {
                cell_content = el.utilization[current_utilization_key];
              }

              return <TableCell key={j}>{cell_content}</TableCell>;
            })}
          </TableRow>
        );
      })}
    </TableBody>
  </Table>
</TableContainer>

//基本上是基于利用率属性加上标头的行数（+1）
让rowCount=Object.keys（数据[0]。利用率）。长度+1；
{[…数组（行计数）].map（（513;，i）=>{
让当前_利用率_键=
i==0？“字段”：Object.keys（数据[0]。利用率）[i-1]；
返回(
{当前利用率\密钥}
{data.map（（el，j）=>{
让单元格_content=“”；
//只是一些条件语句，用于确定单元格是作为标头还是业务计算结果为true
如果（i==0）{
如果（el.business==真）{
cell_content=“营业时间”+el.年；
}否则{
单元格内容=el.年；
}
}否则{
单元格内容=el.utilization[当前utilization\U key]；
}
返回{cell_content}；
})}
);
})}

---

有没有比较同一行中较大的元素？例如，从Sandbox:ActiveParticipantsPercent字段中，2中哪一个更大？您的意思是像排序功能一样？这最好在数据源上完成。e、 例如，关于数据库查询。如果在客户端完成，这是一个单独的逻辑-您可以利用并编写自定义比较函数。或者

map

如果您对不变性感兴趣