地图 React.js 中的 for 循环答案

【问题标题】：For loop inside map React.js地图 React.js 中的 for 循环
【发布时间】：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。

标签： arrays reactjs loops dictionary for-loop

【解决方案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} 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>                       
                ))                                  
        }

【讨论】：