React.js中的map函数内部循环

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 array。我已经尝试过这样做，但显然我不能在我的映射中使用 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>  
)})}

- Cédric Bloem

---

你可以使用另一个 map。 - Sulthan

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的内容。

- Sagiv b.g

---

搞定了，谢谢！我明白你说的关于键值部分的意思。 - Cédric Bloem

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

Working:

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

- Anil Kumar

Answer 3

新闻 API 具有类似于 JSON 数据的格式： {data: [ { Description: "虚拟描述。",thumbnail_img_path: "images.jpg",video_path: "Z9xBo001urjkd" }, { Description: "虚拟描述2。",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>                       
                ))                                  
        }

- Pradeep Bisht