reactjs不工作的.map函数中的.map函数

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>
        )
    }

在这里，如果>1连接的条件没有返回任何内容。第三个条件==1正在返回行。

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

Answer 1

在第二个条件下，您不会为外部映射函数返回任何内容。只返回内部映射函数。在第三个条件下有回报，这就是为什么它能起作用。