将对象字段值和对象键映射到 Tsx 元素的速记检查

如何解决将对象字段值和对象键映射到 Tsx 元素的速记检查

晚上好。

我有一个对象数组，我试图将这些对象映射到 tsx 表元素，但是我需要显示每个字段的关联键。

我尝试使用 Object.keys(item)[index] 但是我无法让它返回一个值。 我正在寻求快速检查的帮助，我已经尝试了一些但没有成功。

                  {myArray.map((item: any) => (
                      <TableRow key={item.name}>
                        <TableCell >{item.name === row.name ? `${Object.keys(item)[2]}` && item.a || item.b || item.c || item.d || item.e : null}</TableCell>
                      </TableRow>
                    ))}

我的数组如下所示：

[
  {
   a: 2,name: "obj1"
  },{
  b: 3,name: "obj2"
  },{
   c: 2,d: 5,name: "obj3"
  }
]

当我映射元素时，它将为每个对象返回一个表格行，但是我试图让行数据显示如下。

"a 2 ",// this will be the row data for obj1
"b 3 ","c 2,d 5"

TIA :)

解决方法

听起来您需要遍历条目（name 键除外），并将键和值连接在一起：

<TableRow key={item.name}>
  <TableCell>{GetCell(item)}</TableCell>
</TableRow>

const GetCell = ({ name,...rest }) => {
  return Object.entries(rest)
    .map(entry => entry.join(' '))
    .join(',');
};

或者，如果您想为每个非 name 键设置一个单独的单元格：

{myArray.map(({ name,...rest }) => (
  <TableRow key={name}>{
      Object.entries(rest)
        .map(entry => <TableCell>{entry.join(' ')}</TableCell>)
  }</TableRow>
))}