如何从2d数组react.js中检索数据

Question

我正在从一个组件中检索数据，该组件作为二维数组传递到另一个组件。

console.log(this.props.cheatsheet)结果[object Object],[object Object]

console.log(JSON.stringify(this.props.dashboards));向我展示了

下面的数组值

[  
   {  
      "name":"Test",
      "description":"TEest",
      "filter":[  
         "201158",
         "200461",
         "201345"
      ],
      "KPIs":[  

      ]
   },
   {  
      "name":"Asset Owner Dashboard",
      "description":"Description for Asset Owner Dashboard",
      "filter":[  
         "201732",
         "222323",
         323244
      ],
      "KPIs":[  
         {  
            "name":"Asset",
            "charts":[  
               {  
                  "name":"Details"
               }
            ]
         },
         {  
            "name":"Incidents",
            "charts":[  
               {  
                  "name":"Count by AssignmentGroup"
               },
               {  
                  "name":"COE Open Tickets"
               },
               {  
                  "name":"NEW IM in Last 48hrs"
               }
            ]
         },
         {  
            "name":"Problem Tickets",
            "charts":[  
               {  
                  "name":"Count by Status"
               },
               {  
                  "name":"Open PMR"
               },
               {  
                  "name":"Details"
               }
            ]
         }
      ]
   }
]

我从test和Asset Owner Dashboard映射过滤器数组的最佳方法是什么？

Answer 1

您可以使用嵌套地图来渲染数据。就像下面的例子一样

class App extends React.Component {
   render(){
      var arr = [  
   {  
      "name":"Test",
      "description":"TEest",
      "filter":[  
         "201158",
         "200461",
         "201345"
      ],
      "KPIs":[  

      ]
   },
   {  
      "name":"Asset Owner Dashboard",
      "description":"Description for Asset Owner Dashboard",
      "filter":[  
         "201732",
         "222323",
         323244
      ],
      "KPIs":[  
         {  
            "name":"Asset",
            "charts":[  
               {  
                  "name":"Details"
               }
            ]
         },
         {  
            "name":"Incidents",
            "charts":[  
               {  
                  "name":"Count by AssignmentGroup"
               },
               {  
                  "name":"COE Open Tickets"
               },
               {  
                  "name":"NEW IM in Last 48hrs"
               }
            ]
         },
         {  
            "name":"Problem Tickets",
            "charts":[  
               {  
                  "name":"Count by Status"
               },
               {  
                  "name":"Open PMR"
               },
               {  
                  "name":"Details"
               }
            ]
         }
      ]
   }
]
      
      return (
        <tbody>
           {arr.map(function(item){
               return (
                  <tr>
                     {item.filter.map(function(val){
                       return <td>{val}</td>
                       
                      })}
                  </tr>
               )
           })} 
        </tbody>
      )
   }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>