地图React.js中的For循环

Question

说明

所以我有一个像这样的数组：

const CategoriesList = [
    {nameNL:'bakkerij', 
     nameFR:'boulangerie', 
     nameEN:'bakery', 
     nameDE:'Bäckerei', 
     categories: [
        {nameNL:'bakkerij', nameFR:'boulangerie', nameEN:'bakery', nameDE:'Bäckerei'},
        {nameNL:'bier', nameFR:'la bière', nameEN:'beer', nameDE:'Bier'},
    ]},
]

我可以轻松映射所有项目。然而;在该地图函数中，我想在 categorieslist 中的 categories数组之间循环。我已经尝试这样做，但是显然我无法在地图中使用for循环。

问题

如何在map函数内部循环对象。

我有什么

 {CategoriesList.map(({nameNL, nameFR, nameEN, nameDE, categories}, index) => {
    return (
        <div key={index} className='flxRow'>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameNL}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameFR}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameEN}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameDE}</div>
            {
                for (i = 0; i < categories.length; i++) { 
                    console.log(categories[i].name)
                }
            }
        </div>  
)})}

Answer 1

您可以使用另一个map：

 {CategoriesList.map(({nameNL, nameFR, nameEN, nameDE, categories}, index) => {
    return (
        <div key={index} className='flxRow'>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameNL}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameFR}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameEN}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameDE}</div>
            {
                categories.map(category => ...)
            }
        </div>  
)})}

我建议您也阅读有关keys的信息

Answer 2

const CategoriesList = [
{nameNL:'bakkerij', 
 nameFR:'boulangerie', 
 nameEN:'bakery', 
 nameDE:'Bäckerei', 
 categories: [
    {nameNL:'bakkerij', nameFR:'boulangerie', nameEN:'bakery', nameDE:'Bäckerei'},
    {nameNL:'bier', nameFR:'la bière', nameEN:'beer', nameDE:'Bier'},
]},

]

const result = CategoriesList.map(item => {
 return item.categories.map(item2 => {
   return (
    console.log(item2.nameNL));
  })
 });

工作：

https://codepen.io/anildelhi/pen/YdPmvL?editors=1111

Answer 3

news API has JSON data like:-

{data: [
{
Description: "dummy description.",thumbnail_img_path: "images.jpg",video_path: "Z9xBo001urjkd"
},
{
Description: "dummy desc2.",thumbnail_img_path: "images-thumnail-1.jpg",video_path: "jklbtt2of8"
}]}

{news.map((item,i) => (   
                    
                    <div key={i}>
                    {
                        item.data.map((data, index) => (  //console.log(data.Description)) )                        
                        <div key={index}>
                            <div className="panel video-thumbnail" >
                            <img className="img-fluid"  src={data.thumbnail_img_path} alt="thum1" ytid={data.video_path} />
                            <div className="img-overlay">
                            <a href="#"><img src="../micro-assets/img/video-play.svg" alt="vplay" /></a>
                             </div>
                            </div>  
                        </div>
                        ))
                    }
                </div>                       
                ))                                  
        }