Shorthand 检查以将对象字段值和对象键映射到 Tsx 元素

Question

晚上好。

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

我已经尝试使用 Object.keys(item)[index] 但是我无法将其设为 return 值。我正在寻求有关速记检查的帮助，我已经尝试了一些但没有成功。

                  {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"
  }
]

当我在元素上映射时，它将 return 每个对象的 table 行，但是我试图让行数据显示如下。

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

TIA :)

Answer 1

听起来您需要遍历条目（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>
))}

Shorthand 检查以将对象字段值和对象键映射到 Tsx 元素

Shorthand check to map object field value and object key to Tsx element

javascript

reactjs

mapping

shorthand