我有这样的json数组
EMAIL: (3) ["john@example.com","harry@example.com","howard@example.com"]
FIRSTNAME: (3) ["John","Harry","Howard"]
LASTNAME: (3) ["Smith","Pierce","Paige"]
SMS: (3) ["33123456789","33111222222","33777888898"]
我正在尝试创建一个这样的表
然后是firstName，LastName等组
在我尝试过的render（）中
{columnmapRows.EMAIL.map(row => (
<TableRow >
<TableCell align="center">{row}</TableCell>
</TableRow>
))}
但是我不想使用列名进行映射，我正在寻找通用解决方案。 电子邮件，名字，姓氏是动态的，来自csv文件，可以随时更改
我也尝试过foreach和简单的数组循环。但它不起作用 请建议
您应该使用map函数中的索引来访问其他数据。
{columnMapRows.EMAIL.map((email,i) => (
<TableRow key={email}>
<TableCell align="center">{email}</TableCell>
<TableCell align="center">{columnMapRows.FIRSTNAME[i]}</TableCell>
<TableCell align="center">{columnMapRows.LASTNAME[i]}</TableCell>
<TableCell align="center">{columnMapRows.SMS[i]}</TableCell>
</TableRow>
))}
// this assumes that all the array are the same length which seems to be the case
编辑：假设电子邮件始终存在，动态解决方案
{columnMapRows.EMAIL.map((email,i) => (
<TableRow key={email}>
{Object.keys(columnMapRows).map((key) => (
<TableCell align="center" key={key} >{columnMapRows[key][i]} </TableCell>
))}
</TableRow>
))}
编辑：具有数据重构功能的动态解决方案
const keys = Object.keys(columnMapRows);
const items = columnMapRows[keys[0]].map(() => ({}));
keys.forEach((key) => {
columnMapRows[key].forEach((data,i) => {
items[i][key] = data;
});
});
{items.map((item) => (
<TableRow>
{Object.keys(item).map((key) => (
<TableCell key={key}>{item[key]}</TableCell>
))}
</TableRow>
))}
这当然可以改善，但我认为它表明了主要思想。我决定构造一个对象数组，因为我认为这很容易理解。然后使用Object.keys遍历那些对象属性。