javascript - 我不知道在这种情况下如何使用 map

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 ={
  "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
      }
  ]
}

heroes.skills.map(hero=>{
  console.log("damage...........",hero.damage)
  console.log("basicAttack.category.........",hero.basicAttack.category)
  console.log("specialAttack.category........",hero.specialAttack.category)
})

如果你想渲染，那么你必须返回它然后渲染

const heroesDiv = this.state.heroes.skills.map((hero) => (
  <>
    <p>{item.damage}</p>
    <p>{item.specialAttack.category} + {item.basicAttack.category}</p>
  </>
))