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

在第二種情況下，您不會為外部映射函數返回任何內容。 僅返回內部地圖功能。 在第三個條件下有回報，這就是它起作用的原因。