在反应中迭代另一个列表答案

【问题标题】：iterate a list inside another in react在反应中迭代另一个列表
【发布时间】：2019-03-15 22:03:56
【问题描述】：

我对 react 和 javascript 还很陌生，我想知道如何在另一个列表中迭代一个列表。

我有这个 json 变量：

this.state = {
            groups: [{
                name: '',
                permission: [{
                    name: ''
                }]
            }]
        }

我想要做的是计算第二个列表的元素数量，我执行了以下代码，但它发送了以下错误，groups.map 不是函数：

渲染() {

    let permissionGroup = this.state.groups.map((groups) => {
        let x = 0;
        groups.map((permission) => {
            x++;
        })
    })


    return (
              <div>

                    {this.state.groups.map((groups) => {
                    return (<li key={groups.code}>
                        <Card style={{ width: '20rem' }}>
                            <Card.Body>
                                <Card.Title>{groups.name}</Card.Title>
                                <Card.Subtitle className="mb-2 text- enter code heremuted">Permissions info</Card.Subtitle>
                                <Card.Text>
                                    This group has {permissionGroup}  permissions in it.
                             </Card.Text>
                                <Card.Link href="#">Add Permission</Card.Link>
                                <Card.Link href="#">Remove Permission</Card.Link>
                            </Card.Body>
                        </Card>
                    </li>)

                })}


              </div>

【问题讨论】：

您确定您的状态最初设置为数组吗？也许它是通过异步调用之后设置的。 .map() 绝对是数组上的一个函数。出现此错误的唯一方法是状态尚未初始化，或者已被非数组覆盖。
我觉得这里解释的很好stackoverflow.com/questions/31676135/…

标签： javascript reactjs

【解决方案1】：

在您的第一张地图中，它应该是 groups.permission.map，而不是 groups.map。

    let permissionGroup = this.state.groups.map((groups) => {
        let x = 0;
        groups.permission.map((permission) => {

那是因为您的第一张地图将每个“组”定义为：

{name: '', permission: [{name: ''}]}

所以groups 在这个意义上是一个对象，而不是一个数组。访问permission 以获取您想要的数组。

【讨论】：