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

【问题标题】：How to iterate through a list of objects in reactjs using map function?如何使用 map 函数遍历 reactjs 中的对象列表？
【发布时间】：2021-01-30 17:20:14
【问题描述】：

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

例子-

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>
  ))

但这给了我多次连接的所需表格。我知道循环存在一些问题，但没有确切地知道困难在哪里。

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

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

【问题讨论】：

标签： javascript arrays reactjs object primereact

【解决方案1】：

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

我想首先得到你的表的thead标题，这可以通过

    <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 的任何库组件你的，但你明白了。

【讨论】：

注意 Object.keys 和 Object.values 遵循对象属性顺序（这是非常新的 [ES2020]，在此之前未定义来自 Object.keys 的数组顺序）和对象属性order（本身是一个相对较新的东西，ES2015）很复杂，很容易被误解。这不是可以依赖的东西。
不完全一样，但我在这些方面做了一些工作，它有所帮助

【解决方案2】：

假设一个Row 组件，你会为外部map 的每个回调返回一个Row，类似这样（我将它们放在一个假设的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。

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

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

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

错了。

它们的顺序相同，因为名称为规范所称“array indexes”的属性（数值为 +0 或正整数 Number ≤ 2 的规范数字字符串³² - 1) 总是按数字顺序。

然后你把继承的属性扔进去，情况变得更糟。因此，一般情况下，请避免依赖对象属性顺序。

【讨论】：