如何动态显示数组数组？

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) => {  

   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>

);