Question

我有像这样的JSON数组

"Nodes": [
{
  "Name": "abc",
  "ID": "123",
  "type": "xyz",
  "connections": [
    {
      "ipAddress": "1.1.2.2",
      "username": "name",
      "type": "mno"
    },
    {
      "ipAddress": "1.1.2.3",
      "username": "name2",
      "type": "mno2"
    }
  ]
},
{
  "Name": "abc2",
  "ID": "124",
  "type": "xyz2",
  "connections": [
    {
      "ipAddress": "1.1.2.4",
      "username": "name3",
      "type": "mno3"
    }
  ]
} ]

我正在尝试将其显示为一个表来为每个连接设置密码。我的代码如下所示。

_passwordManagement: function() {

        return (
            <Table>
                <thead>
                    <tr>
                        <th>
                            IP Address
                        </th>
                        <th>
                            User Name
                        </th>
                        <th>
                            Password
                        </th>
                        <th>
                            Re-Enter Password
                        </th>
                        <th>
                        </th>
                    </tr>
                </thead>
            <tbody>
            {this.state.all.map(function(nodes, i) {
                if (nodes.connections.length == 0){
                    console.log("This has no node");
                } else if (nodes.connections.length > 1) {
                    {nodes.connections.map(function(conn) {
                        return(
                        <TableRow>
                            <td>
                                {conn.ip} 
                            </td>
                            <td>
                                {conn.username}
                            </td>
                            <td className='secondary'>
                                <TextInput type="password" placeHolder="*****" className="passwordInput"/>
                            </td>
                            <td className='secondary'>
                                <TextInput type="password" placeHolder="*****" className="passwordInput"/>
                            </td>
                            <td className='secondary'>
                                <Button label='Set Password' className="tableButton" />
                            </td>
                         </TableRow>
                        );
                    }, this)
                    }

                } else if (nodes.connections.length == 1) {
                    return(
                        <TableRow key={i}>
                            <td>
                                {nodes.connections[0].ip}
                            </td>
                            <td>
                                {nodes.connections[0].username}
                            </td>
                            <td className='secondary'>
                                <TextInput type="password" placeHolder="*****" className="passwordInput"/>
                            </td>
                            <td className='secondary'>
                                <TextInput type="password" placeHolder="*****" className="passwordInput"/>
                            </td>
                            <td className='secondary'>
                                <Button label='Set Password' className="tableButton" />
                            </td>
                         </TableRow>
                    );
                }

            }, this)}
            </tbody>
        </Table>
        )
    }

如果带有＆gt; 1个连接的条件没有返回任何内容。第三个条件== 1正在返回行。

帮助我理解我在做什么。提前谢谢。

Answer 1

在第二种情况下，您没有为外部地图功能返回任何内容。仅返回内部地图功能。在第三个条件下有回归，这就是它工作的原因。

.map函数里面.map函数的reactjs无法正常工作

1 个答案: