Reactjs mit Pokeapi

Question

Ich bin neu zu reagierenJS und ich habe eine App, die den Namen des Pokemon liest die Daten liest z. Name, Größe, Gewicht. Wenn es um die Fähigkeiten geht, kann ich den Wert des Namens der Fähigkeit nicht bekommen.

hier ist mein 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;

Vielen Dank im Voraus.

Answer 1

Fähigkeiten hat diese Struktur. Sie können dies überprüfen, indem Sie this.state.abilities protokollieren

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

Es ist nur ein Array. Was Sie tun müssen, ist über dieses Array iterieren, um diese Namen Werte abzurufen. Es gibt eine Menge Möglichkeiten, sollte dies aber die allgemeine Logik tun so etwas wie:

„Für jedes dieser Objekte in den Fähigkeiten Array, ich brauche ability.name abrufen“

Ich werde schreiben einige Code hier, aber versuchen Sie es selbst zu lösen, bevor Sie sich meine anschauen.

In Ihrem p-Tag, können Sie diese

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