时间戳

首页 > 解决方案 > 在函数返回的表中呈现数组数据 - Reactjs Javascript

javascript - 在函数返回的表中呈现数组数据 - Reactjs Javascript

问题描述

我只是在学习 reactjs 和 javascript，并试图用我拥有的数组数据来渲染一个表格。

我找到了一个关于材料 UI 的示例，说明他们是如何做到的，但是放入了常量数组。

我的数组对象如下所示：Array = [Object, Object, Object, Object, Object] (5) 详细：Array>

0 {RowNumber: 1, AssetId: 324, TagNumber: "", SerialNumber: "776", …}
1 {RowNumber: 2, AssetId: 233, TagNumber: "", SerialNumber: "32", …}
2 {RowNumber: 3, AssetId: 266, TagNumber: "", SerialNumber: "45", …}
3 {RowNumber: 4, AssetId: 887, TagNumber: "", SerialNumber: "23", …}
4 {RowNumber: 5, AssetId: 44, TagNumber: "", SerialNumber: "23", …}

我有以下数组：

我的响应 = [];

以下是我尝试自定义但不适用于我的材料 UI 中的代码：

  const classes = useStyles();
  getAssetList();
  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <StyledTableCell>RowNumber</StyledTableCell>
            <StyledTableCell align="right">AssetId</StyledTableCell>
            <StyledTableCell align="right">TagNumber</StyledTableCell>
            <StyledTableCell align="right">SerialNumber</StyledTableCell>
            <StyledTableCell align="right">xyz</StyledTableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {myResponse.map(res => (
            <StyledTableRow key={res[0]}>
              <StyledTableCell component="th" scope="row">{res[0]}</StyledTableCell>
              <StyledTableCell align="right"><Link to={"/assetlist"} style={{ textDecoration: 'none' }}>{res[1]}</Link></StyledTableCell>
              <StyledTableCell align="right">{res[2]}</StyledTableCell>
              <StyledTableCell align="right">{res[3]}</StyledTableCell>
              <StyledTableCell align="right">{res[4]}</StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

我不确定如何在表中正确呈现数组 myResponse 中的数据。上面的代码对我不起作用。

有人可以指点我一些很好的教程来理解这一点，并告诉我如何正确地实现这一点吗？

谢谢。

标签： javascriptarraysreactjs

解决方案

Map 将遍历您的数组，并为每个元素呈现一个组件——在本例中为您的 StyledTableRow。因此，在每次迭代中，您都可以访问索引处的元素——即对象。您尝试通过索引访问的“res”实际上是数组中的元素之一，即您的对象之一（地图已经在处理迭代）我已经解构了对象以使其更容易工作在访问其属性方面。不完全确定您希望如何显示属性中的数据，但概念就在那里。

 {myResponse.map(({ RowNumber, AssetId, TagNumber, SerialNumber }) => (
            <StyledTableRow key={RowNumber}>
              <StyledTableCell component="th" scope="row">{RowNumber}</StyledTableCell>
              <StyledTableCell align="right"><Link to={"/assetlist"} style={{ textDecoration: 'none' }}>{RowNumber}</Link></StyledTableCell>
              <StyledTableCell align="right">{AssetId}</StyledTableCell>
              <StyledTableCell align="right">{SerialNumber}</StyledTableCell>
              <StyledTableCell align="right">{TagNumber}</StyledTableCell>
            </StyledTableRow>
          ))}

推荐阅读