地图 React.js 中的 for 循环

Posted 2023-02-22

【中文标题】地图 React.js 中的 for 循环

【英文标题】：For loop inside map React.js

【发布时间】：2019-05-12 09:45:09

【问题描述】：

说明

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

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 循环。

问题

如何在地图函数中循环对象。

我有什么

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

【问题讨论】：

你使用另一个map。

【参考方案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

【讨论】：

做到了；谢谢！ & 我明白你对键部分的意思。

【参考方案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

【参考方案3】：

新闻 API 具有 JSON 数据，例如：- 数据： [ 描述：“虚拟描述。”，thumbnail_img_path：“images.jpg”，video_path：“Z9xBo001urjkd” , 描述：“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  ytid=data.video_path />
                            <div className="img-overlay">
                            <a href="#"><img src="../micro-assets/img/video-play.svg"  /></a>
                             </div>
                            </div>  
                        </div>
                        ))
                    
                </div>                       
                ))