MAP es6在響應中不能與對象數組一起工作？

Question

MAP es6不能與反應中的對象數組一起使用。我做的console.log（項目），並得到以下結果

{ 
"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> 
)} 

Answer 1

原因是this.skills內再次地圖是一個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); 
    }); 
}) 

Answer 2

你的skills[n].skills是數組。你需要改變結構或者再次執行.map到你的第一個map方法中。就像這樣：

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