我不知道在这种情况下如何使用地图

Question

我将这个 JSON 的内容写入数组“heroes”，但我不知道如何获取“damage”、“basicAttack.category”和“specialAttack.category”进行映射。我试图解决这个问题，但不幸的是我不知道如何解决。

{

    "id": 20,

    "name": "Warrior",

    "skills": [

        {

            "id": 1,

            "basicAttack": {

                "id": 2,

                "name": "Hit1",

                "category": "weakAttack"

            },

            "specialAttack": {

                "id": 16,

                "name": "Special1",

                "category": "spellAttack"

            },

            "damage": 200

        },

        {

            "id": 2,

            "basicAttack": {

                "id": 3,

                "name": "Hit2",

                "category": "rangeAttack"

            },

            "specialAttack": {

                "id": 17,

                "name": "Special2",

                "category": "fightAttack"

            },

            "damage": 100

        }

    ]

}

这是我的映射方式以及我想要获取的数据

const item = this.state.heroes.skills.map(item => {

    /*i dont have idea how map

        <p>{item.damage}</p>

        <p>{item.specialAttack.cathegory} + {item.basicAttack.category}</p>

     */

})

Answer 1

只是地图上的heroes.skills，你会发现结果如何访问值var heroes ={&nbsp; "id": 20,&nbsp; "name": "Warrior",&nbsp; "skills": [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "basicAttack": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Hit1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "category": "weakAttack"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "specialAttack": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 16,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Special1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "category": "spellAttack"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "damage": 200&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "basicAttack": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 3,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Hit2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "category": "rangeAttack"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "specialAttack": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 17,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Special2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "category": "fightAttack"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "damage": 100&nbsp; &nbsp; &nbsp; }&nbsp; ]}heroes.skills.map(hero=>{&nbsp; console.log("damage...........",hero.damage)&nbsp; console.log("basicAttack.category.........",hero.basicAttack.category)&nbsp; console.log("specialAttack.category........",hero.specialAttack.category)})如果你想渲染，那么你必须返回它然后渲染const heroesDiv = this.state.heroes.skills.map((hero) => (&nbsp; <>&nbsp; &nbsp; <p>{item.damage}</p>&nbsp; &nbsp; <p>{item.specialAttack.category} + {item.basicAttack.category}</p>&nbsp; </>))

Answer 2

this.state.heroes.skills.map((item) => {&nbsp; return `<div><p>${item.damage}</p><p>${item.specialAttack.category} ${item.basicAttack.category}</p></div>`})

Answer 3

let data = {&nbsp; "id": 20,&nbsp; "name": "Warrior",&nbsp; "skills": [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "basicAttack": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Hit1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "category": "weakAttack"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "specialAttack": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 16,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Special1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "category": "spellAttack"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "damage": 200&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "basicAttack": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 3,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Hit2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "category": "rangeAttack"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "specialAttack": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 17,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Special2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "category": "fightAttack"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "damage": 100&nbsp; &nbsp; &nbsp; }&nbsp; ]}这是你可以映射的方式return (&nbsp;<div>&nbsp; {data.skills.map(item=>&nbsp; <div key={item.id}>&nbsp; &nbsp;<h3>{item.id}: {item.basicAttack.name}-{item.basicAttack.category}, {item.specialAttack.name}-{item.specialAttack.category}</h3>&nbsp; </div>)}&nbsp;</div>)