0

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

2 回答 2

2

假设一个Row组件，你会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属性，因为这些是数组。（将索引用于keyonRow不太理想。如果item对象具有可以使用的某些唯一属性，那会更好。如果数组在组件生命周期中从不更改，则使用索引很好，但如果确实如此，它可能导致糟糕的渲染。更多关于React 文档的内容。）

但是，使用Object.entriesonitem并不理想，因为它依赖于 中属性的顺序item，尽管 JavaScript 对象确实为其属性提供了顺序，但依赖该顺序通常不是最佳实践，因为顺序并不像看起来，构建看起来像同一个对象但属性顺序不同的对象真的很容易。¹相反，我建议按照您希望它们出现在列中的顺序排列一个属性名称数组，然后使用那个数组：

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

错误的。

它们的顺序相同，因为名称为规范所称的“数组索引”（数值为 +0 或正整数 Number ≤ 2 32 - 1 的规范数字字符串）的属性始终按数字顺序排列。

然后你把继承的属性扔进去，它会变得更糟。因此，一般来说，避免依赖对象属性顺序。

于 2020-10-16T07:43:41.613 回答
0

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

我想首先得到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您的任何库组件，但您明白了。tbodytrtdGridTableHeadTableBodyRowColumn

于 2020-10-16T07:49:32.473 回答