在另一个内部迭代一个列表

Question

我很反应和javascript，我想知道如何迭代另一个列表中的列表。

我有这个json变量：

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

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

render（）{

    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>

Answer 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以获得所需的阵列。