如何动态显示数组数组？

Question

如何动态显示具有多个数组的数组。嵌套数组有多个对象。

例如

Var obj = 

[

  [

    {

      name: "Test 1",

      category: "Test 1"

    }, 

    {

      name: "Test 2",

      category: "Test 1"

    }, 

  ],

  [

    {

      name: "Test 1",

      category: "Test 2"

    }, 

    {

      name: "Test 2",

      category: "Test 2"

    }, 

  ]

]

那么我如何动态显示它并在我尝试过的反应组件中呈现它[下面]并且它工作完美并显示第一个数组对象，但我无法想出一种方法让它显示其余部分

list = obj[0].map((e, index) => {  

   return (

      <div key={index}>

         <p>{e.name}</p>

         <h6>{e.category}</h6>

      </div>

   )

})      

return (

   <div>

      {list}             

   </div>

)

Answer 1

你有几个选择。一种是显式循环遍历外部数组，然后遍历内部数组：const list = obj.map(cat => cat.map((e, index) => {&nbsp;&nbsp;&nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; <div key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>{e.name}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h6>{e.category}</h6>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;)}));&nbsp; &nbsp; &nbsp;&nbsp;这里的问题是index在页面上不会是唯一的。作为一般规则，无论如何您都不应该使用数组索引作为组件键。你最好使用类似的东西&nbsp; &nbsp;(&nbsp; &nbsp; &nbsp; <div key={`${e.name}-${e.category}`}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>{e.name}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h6>{e.category}</h6>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;)另一种方法是展平数组：const list = [].concat(...obj).map(e => (&nbsp; <div key={`${e.name}-${e.category}`}>&nbsp; &nbsp; <p>{e.name}</p>&nbsp; &nbsp; <h6>{e.category}</h6>&nbsp; </div>);