在没有键名的嵌套数组中反应 js Map

Question

我有这样的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>
    ))}

但我不想使用列名进行映射，我正在寻找通用解决方案。 email , firstname , lastname 是动态的，来自 csv 文件，可以随时更改

我也尝试过 foreach 和简单的数组循环。但它不起作用 请推荐

Answer 1

您应该使用地图函数中的索引来访问其他数据。

{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 迭代这些对象属性。