gpt4 book ai didi

javascript - 在函数返回内的表中渲染数组数据 - Reactjs Javascript

转载 作者:行者123 更新时间:2023-12-02 23:18:06 25 4
gpt4 key购买 nike

我刚刚学习reactjs和javascript,并尝试使用我拥有的数组数据渲染表格。

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

我的数组对象如下所示:数组 = [对象、对象、对象、对象、对象] (5)详细 :数组>

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", …}

我有以下数组:

myResponse = [];

以下是我尝试自定义但不适合我的 Material 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 中的数据。上面的代码对我来说没有正确工作。

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

谢谢。

最佳答案

Map 将迭代您的数组,并为每个元素呈现一个组件 - 在本例中为您的 StyledTableRow。因此,在每次迭代中,您都可以访问索引处的元素(即对象)。您尝试通过索引访问的“res”实际上是数组中的元素之一,即您的对象之一( map 已经在处理迭代)我已经解构了该对象以使其更容易工作就访问其属性而言。不完全确定您想要如何显示属性中的数据,但概念就在那里。

 {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>
))}

关于javascript - 在函数返回内的表中渲染数组数据 - Reactjs Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57085998/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com