javascript - 如何动态显示数组的数组？

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

那么我如何动态显示它并在 react 组件中渲染它我尝试了[下面]，它工作完美并显示第一个数组对象，但我无法找到一种方法让它显示其余部分

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) => {  
   return (
      <div key={index}>
         <p>{e.name}</p>
         <h6>{e.category}</h6>
      </div>
   )
}));      

这里的问题是 index 在页面上不是唯一的。作为一般规则，无论如何您都不应该使用数组索引作为组件键。你最好使用类似的东西

   (
      <div key={`${e.name}-${e.category}`}>
         <p>{e.name}</p>
         <h6>{e.category}</h6>
      </div>
   )

另一种方法是展平数组:

const list = [].concat(...obj).map(e => (
  <div key={`${e.name}-${e.category}`}>
    <p>{e.name}</p>
    <h6>{e.category}</h6>
  </div>
);