如何使用 map 函数遍历 reactjs 中的对象列表？

Question

我正在尝试遍历 reactjs 中的对象数组但遇到问题。该数组基本上由对象组成，其中每个对象都是 table.

中的一行

例子-

A table like this
| A | B | C |
| 1 | 2 | 3 |
| 4 | 5 | 6 |

would be represented using the following array
[
  {"A": 1, "B": 2, "C": 3},
  {"A": 4, "B": 5, "C": 6}
]

我正在尝试使用以下语法遍历这些值 -

this.state.data.map(item =>
  Object.entries(item).map(([key, value]) =>
    <Column field={key} header={key}>{value}</Column>
  ))

但这给了我所需的 table 多次连接。我知道循环有一些问题，但没有找到困难所在。

python 中的类似情况看起来像 -

for item in array:
    for key, value in item.items():
        # create a row

Answer 1

假设一个 Row 组件，你会 return 一个 Row 用于外部 map 的每个回调，就像这样（我把它们放在一个假设的 Container 只是为了上下文）：

<Container>
{this.state.data.amp((item, index) =>
    <Row key={index}>
    {Object.entries(item).map(([key, value]) =>
        <Column field={key} header={key} key={key}>{value}</Column>
    )}
    </Row>
)}
</Container>

注意我添加了 key 属性，因为它们是数组。（在 Row 上使用 key 的索引不太理想。如果 item 对象有一些独特的属性你可以改用，那会更好。如果数组在组件生命周期中从不更改，则使用索引很好，但如果更改，则可能导致渲染效果不佳。更多信息请参见 the React documentation。）

但是，在item上使用Object.entries不太理想，因为它依赖于item中属性的顺序，尽管 JavaScript 对象确实为它们的属性提供 an order，但依赖该顺序通常不是最佳实践，因为该顺序并不像看起来那么简单，而且 确实如此 很容易构建看起来像同一个对象但属性顺序不同的东西。¹相反，我建议按照您希望它们出现在列中的顺序使用属性名称的数组，然后使用该数组：

<Container>
{this.state.data.amp((item, index) =>
    <Row key={index}>
    {propertyNamesInColumnOrder.map(key =>
        <Column field={key} header={key} key={key}>{item[key]}</Column>
    )}
    </Row>
)}
</Container>

¹ “真的很容易构建看似相同但属性顺序不同的对象” 例如：

const obj1 = {a: 1, b: 2};
const obj2 = {b: 2, a: 1};

它们看起来像是同一个物体。它们都具有 a 和 b 属性，并且属性值相同。但是属性的顺序不同：obj1的属性是a, b的顺序，而obj2的属性是b, a.[=38=的顺序]

但是等等，情况变得更糟：

const obj3 = {"1": "one", "0": "zero"};
const obj4 = {"0": "zero", "1": "one"};

当然，如果 obj1 和 obj2 的属性顺序不同，那么 obj3 和 obj4 的属性也不在同样的顺序，对吧？

错了。

它们的顺序相同，因为其名称为规范所称的属性“array indexes”（数值为 +0 或正整数 Number ≤ 2[=65 的规范数字字符串=]32 - 1) 总是在 numeric 顺序。

然后你把继承的属性扔进去，情况变得更糟。所以，一般来说，避免依赖对象属性 order.

Answer 2

您应该考虑重新调整渲染方式。

我想首先得到你的 table 的 thead header 这可以通过

    <thead>
    {Object.keys(this.state.data[0]).map((v) => 
     <th>{v}</th>)
    }
    </thead>

然后是tbody，可以由

完成

<tbody>
   {this.state.data.map((v) => 
    <tr>
    {Object.values(v).map((value) => <td>{value}</td>}
    </tr>)
    }
</tbody>

参考：https://reactjs.org/docs/thinking-in-react.html

编辑：您可以将我的 thead、tbody、tr、td 示例替换为 Grid、TableHead、TableBody、Row、Column 任何你的库组件，但你明白了。

如何使用 map 函数遍历 reactjs 中的对象列表？

How to iterate through a list of objects in reactjs using map function?

javascript

arrays

object

reactjs

primereact