无法在ReactJS中映射一个数组，导致不可迭代的错误。

Question

目前，我的项目使用react.js。我面临着一个问题，即无法渲染一个列表。 错误是 。

index.js:5 Uncaught TypeError: Invalid attempt to spread non-iterable instance.

这是我的代码，它试图呈现的数据。

                    <Row justify="center" align="middle" style={{padding:50}}>
                {(this.props.transition_approvals_hooks).map(hook => (<WorkflowAutomationList key={hook.id} {...hook} />))}
                </Row>

这是数据格式。

[{…}]
0:
callback_function: {id: 1, name: "print date", body: "from datetime import datetime
def handle(context):
    print(datetime.now())", version: 1, date_created: "2020-05-24T06:14:42.211722Z", …}
id: 1
object_id: null
transition: null
transition_meta: 1
__proto__: Object
length: 1
__proto__: Array(0)

Answer 1

使用destructuring将数据存储在一个道具中，然后传递给它--。

<WorkflowAutomationList key={hook.id} data=[...hook] />

Answer 2

我想你是想用数据来迭代行，行不是应该在循环里面吗，比如。

{props.rows.map((x,i) => <Row key={i} data={x} />) }

也许会有帮助