如何动态显示组中的数组

Question

如何动态显示数组数组。嵌套数组具有多个对象。我想按组显示它们。

var obj = 
[
   [
     { name: 'Text 1', title: 'Text 1 Title', category: 'Text 1' },

     { name: 'Text 2', title: 'Text 2 Title', category: 'Text 1' }
   ],

   [
     { name: 'Text 1', title: 'Text 1 Title', category: 'Text 2' },

     { name: 'Text 2', title: 'Text 2 Title', category: 'Text 2' }
   ],
]

我原来的解决方案可以工作，但可以全部显示在同一行

const list = obj.map(cat => cat.map(e => {  
   return (
      <div className={e.category} key={`${e.title}-${e.name}`}>
         <h6>{e.title}</h6>
         <p>{e.name}</p>
      </div>
   )       
}));    

例如

Name: Text 1
Title: Text 1 Title
Name: Text 2
Title: Text 2 Title
Name: Text 1
Title: Text 1 Title
Name: Text 2
Title: Text 2 Title

我想像这样显示它们

Text 1 Category
Name: Text 1
Title: Text 1 Title
Name: Text 2
Title: Text 2 Title

Text 2 Category
Name: Text 1
Title: Text 1 Title
Name: Text 2
Title: Text 2 Title

我试图在div中创建类别的名称，并给它们提供ID，然后对其进行渲染，但我想不出如何在正确的div中实现类别的解决方案

var objList = ["Text 1", "Text 2"];

const sectionList = objList.map((e, index) => {
   return (
      <div id={e} key={index}></div>
   )
})

Answer 1

重新制作obj

const reArray = {};

obj.forEach(parent => {
    parent.forEach(child => {
        const {name, title, category} = child;
        if(reArray[category]) {
            reArray[category].push({name, title})
        } else {
            reArray[category]=[{name,title}]
        }
    })
})

渲染

Object.keys(reArray).map(obj => {
    return (
        <div key={obj}>
            <h6>{obj} Category</h6>
            {reArray[obj].map(item => {
                const {name, title} = item;
                return (
                    <>
                        <p>Name :{name}</p>
                        <p>Title : {title}</p>
                    </>
                )
            })}
        </div>
    )
})