时间戳

首页 > 解决方案 > 反应问题将有效负载映射到带有子数组的表

javascript - 反应问题将有效负载映射到带有子数组的表

问题描述

我正在获取有效负载并尝试将数据映射到表格。由于 auditline 数组，我在映射时遇到了困难。有谁知道扁平化审计线的方法，以便我可以正确映射我的数据。 

payload:
    action: 
     id: 301
     module : 2
     name: "Create folder"
     auditline:
     0: Id: 1723
        description:"Folder has been changed from Matlab to C#"
     1: Id: 1724
        description:"Folder name is Matlab"

这是地图功能片段。

       <TableBody>
          {data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(n => {
            const isSelected = this.isSelected(n.id);
            return (
              <TableRow
                hover
                onClick={event => this.handleClick(event, n.id)}
                role="checkbox"
                aria-checked={isSelected}
                tabIndex={-1}
                key={n.id}
                selected={isSelected}
              >
                  <TableCell>{n.action.name}</TableCell>
                  <TableCell>{n.auditLines.description}</TableCell>
                <TableCell>
                </TableCell>
              </TableRow>
            );
          })}

标签： javascriptreactjs

解决方案

您可以通过map一系列审核来创建多个表格单元格：

<TableRow
    hover
    onClick={event => this.handleClick(event, n.id)}
    role="checkbox"
    aria-checked={isSelected}
    tabIndex={-1}
    key={n.id}
    selected={isSelected}
    >
        <TableCell>{n.action.name}</TableCell>
        {n.auditLines.map(audit => <TableCell key={audit.id}>{audit.description}</TableCell>)}
    <TableCell>
    </TableCell>
</TableRow>

或者，如果您希望将所有这些都放在一个中，请使用join

推荐阅读