arrays - 对于 map React.js 中的循环

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 数组 之间循环。我曾尝试这样做，但显然我不能在我的 map 中使用 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还有