2017-05-25 60 views
0

我有一個JSON數組這樣.MAP功能不工作

"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正在返回行。

幫助我理解我在做什麼錯。提前致謝。

+0

您沒有對陣列節點[i] .connections.length> 1 –

+0

的索引已經在外側使用map函數,因此不需要節點[i],因爲它在任何時候都只有一個項目。 –

+0

'this.state.all'代表什麼? –

回答

0

在第二種情況下,您不會返回任何外部地圖功能。只返回內部地圖功能。第三種情況有回報,這就是爲什麼它的工作。