在reactjs中的数组数组上循环答案

【问题标题】：Loop on array of arrays in reactjs在reactjs中的数组数组上循环
【发布时间】：2017-02-13 06:53:22
【问题描述】：

MAP es6 不适用于反应中的数组数组，数据：

{
"skills": [{
    "field": {
        "id": 1,
        "name": {
            "en": "Web Developer"
        }
    },
    "skills": [{
        "id": 2,
        "name": {
            "en": "Blog"
        }
    }]
}, {
    "field": {
        "id": 3,
        "name": {
            "en": "UI/ UX Designer"
        }
    },

    "skills": [ {
        "id": 4,
        "name": {
            "en": "Web Interface"
        }
    }]
}]

}

所以在我的 jsx 渲染中我会这样做：

{item.skills.map(item => 
    <p>{item.skills.name}</p>
)}

【问题讨论】：

这个对象有错误
看来，您的 item JSON 有一些错误，请尝试在 jsonlint.com 中验证同样的错误
您的 JSON 对象无效。您可以使用jsoneditoronline.org 来检查有效性。
你正在使用item.project.title，在你粘贴的json中，项目和标题键不存在。
@MayankShukla 已修复

标签： javascript reactjs ecmascript-6

【解决方案1】：

原因是this.skills里面的map又是一个array，名字是一个object，首先你需要改变JSON的结构，并且要访问你需要使用name.en的名字，检查这个：

let data = {
    "skills": [{
        "field": {
            "id": 1,
            "name": {
                "en": "Web Developer"
            }
        },
        "skills": {
            "id": 2,
            "name": {
                "en": "Blog"
            }
        }
    },{
        "field": {
            "id": 3,
            "name": {
                "en": "UI/ UX Designer"
            }
        },

        "skills": {
            "id": 4,
            "name": {
                "en": "Web Interface"
            }
        }
    }]
}

data.skills.map((item)=>{
     console.log(item.skills.name.en);
})

如果您在skills 中将skills 定义为array，并且它只包含一项，那么您需要像这样访问名称：

item.skills[0].name.en

否则您需要再次运行map 才能访问该名称。像这样：

data.skills.map((item)=>{
     item.skills.map((el)=>{
         console.log(el.name.en);
     });
})

【讨论】：

【解决方案2】：

您的skills[n].skills 是数组。您需要更改结构或再次执行.map 到您的第一个map 方法。像这样：

{item.skills.map(item => 
    item.skills.map(skill => 
    <p>{skill.name[en]}</p>
    )
)}

【讨论】：