如何使用地图功能遍历reactjs中的对象列表？

问题描述

我正在尝试遍历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

解决方法

假设一个Row组件，您将为外部Row的每个回调返回一个map，就像这样（我将它们放在假设的{{1}中}仅用于上下文）：

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上使用key的索引不理想。如果Row对象具有一些唯一的属性，您可以改用，那会更好。如果数组在组件生命周期中从未发生变化，则很好，但是如果发生变化，则可能导致错误的渲染。有关更多信息，请参见the React documentation。）

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

item

---

¹“ 真的很容易构建看起来像相同的对象，但属性顺序不同的东西” 例如：

<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的属性不相同，对吧？

错。

它们的顺序相同，因为属性名称被规范称为“ array indexes”（规范数值字符串，其数值为+0或正整数Number≤2 ^{32 -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，{{1 }}，TableBody，Row，无论您使用哪个库组件，都可以理解。