javascript - 如何从二维数组react.js检索数据

我正在从反应中的一个组件中检索数据，该数据将作为2d数组传递到另一个组件中。

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"
               }
            ]
         }
      ]
   }
]

对我来说，从测试和资产所有者仪表板映射过滤器阵列的最佳方法是什么？

最佳答案

您可以使用嵌套地图来呈现数据。就像下面的例子

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>

关于javascript - 如何从二维数组react.js检索数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41506932/