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>
  </>
))

Answer 2

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

这就是您的地图方式

return (
 <div>
  {data.skills.map(item=>
  <div key={item.id}>
   <h3>{item.id}: {item.basicAttack.name}-{item.basicAttack.category}, {item.specialAttack.name}-{item.specialAttack.category}</h3>
  </div>)}
 </div>
)

Answer 3

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

Answer 4

    const item = this.state.heroes.skills.map(item => {
    return(
        <React.Fragment key={item.id}>
           <p>{item.damage}</p>
           <p>{item.specialAttack.id}</p>
           <p>{item.basicAttack.id}</p>
           <p>{item.damage}</p>
        <React.Fragment>
      )
    })

Answer 5

您可以这样做

const item = this.state.heroes.skills.map(item => {
    return (
      <React.Fragment>
        <p>{item.damage}</p>
        <p>{item.specialAttack.category} + {item.basicAttack.category}</p>
      </React.Fragment>
   );
})

希望有帮助

Answer 6

您可以使用JSON.parse解析json数据，并且可以轻松映射，如下面的工作片段所示。

var data='{"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}]}';
var jsondata=JSON.parse(data);
console.log(jsondata.skills[0].damage);
console.log(jsondata.skills[0].basicAttack['category']);
console.log(jsondata.skills[0].specialAttack['category']);

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

6 个答案: