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>
);

如何动态显示数组数组？

1 个答案: