Reactjs with Pokeapi

Question

私はreactJSに新しく、私はポケモンの名前を検索するアプリでデータを読み込みます。名前、身長、体重。今は能力になると能力の名前の価値を得ることができません。ここ

は私のapp.js

import React, { Component } from 'react'; 
 
import './App.css'; 
 
import Request from 'superagent'; 
 

 
class App extends Component { 
 
constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     body: "", 
 
     value: "", 
 
     name: "", 
 
     abilities: "", 
 
     order: "", 
 
     weight: "", 
 
     height: "" 
 
    }; 
 

 
    this.handleChange = this.handleChange.bind(this); 
 
    this.handleSubmit = this.handleSubmit.bind(this); 
 
    } 
 

 
    handleChange(event) { 
 
    this.setState({value: event.target.value.toLowerCase()}); 
 
    } 
 

 
    handleSubmit(event) { 
 
    var url = "https://pokeapi.co/api/v2/pokemon/"+this.state.value; 
 
    Request.get(url).then((response) => { 
 
     this.setState({ 
 
     body: response.body, 
 
     height: response.body.height, 
 
     weight: response.body.weight, 
 
     abilities: response.body.abilities, 
 
     name: response.body.name, 
 
     order: response.body.order, 
 
     picFront: response.body.sprites.front_default, 
 
     picBack: response.body.sprites.back_default, 
 
     picShiny: response.body.sprites.front_shiny, 
 

 

 
     }); 
 
    }); 
 
    event.preventDefault(); 
 
    } 
 

 
    render() { 
 

 
    return (
 
     <div className="flex"> 
 
      <div className="App"> 
 
      <h1>Search Pokemon</h1> 
 
      <form onSubmit={this.handleSubmit}> 
 
       <input type="text" value={this.state.value} onChange={this.handleChange} /> 
 
       <input type="submit" value="Submit" /> 
 
      </form> 
 
     </div> 
 
     <div className="app2"> 
 
      <h1><small>{this.state.order} </small>{this.state.name}</h1> 
 
      <img alt={this.state.name} src={this.state.picFront}/> 
 
      <img alt={this.state.name} src={this.state.picBack}/> 
 
      <img alt={this.state.name} src={this.state.picShiny}/> 
 
      <p>Height: {this.state.height}</p> 
 
      <p>Weight: {this.state.weight}</p> 
 
      <p>list of abilities here</p> 
 
     </div> 
 
     </div> 
 

 
    ); 
 
    } 
 
}; 
 

 

 
export default App;

は、事前にありがとうございます。

Answer 1

能力にはこの構造があります。これを確認するには、this.state.abilitiesにログインしてください。

abilities: [ 
    { 
    slot: 3, 
    is_hidden: true, 
    ability: { 
     url: "https://pokeapi.co/api/v2/ability/31/", 
     name: "lightning-rod" 
    } 
    }, 
    { 
    slot: 1, 
    is_hidden: false, 
    ability: { 
     url: "https://pokeapi.co/api/v2/ability/9/", 
     name: "static" 
    } 
    } 
] 

単なる配列です。あなたがする必要があるのは、これらの名前値を取得するためにこの配列を繰り返し実行することです。そこにこれを行うには多くの方法があるが、一般的なロジックのようなものでなければなりません：

「能力配列内のこれらのオブジェクトのそれぞれについて、私はability.nameを取得する必要がある」私は投稿するつもりですここでいくつかのコードが、私の前にそれを自分で解決しようとする。あなたのpタグで

、あなたが行うことができます。この

<p> 
     list of abilities here: 
     {this.state.abilities && this.state.abilities.map((abilityObject) => 
     abilityObject.ability.name).join(', ')} 
    </p>