想要从React Js中的API获取数组中的数据

nitin bakaya 发表于 Dev

尼丁b

我想从API获取数组中的数据，但无法找到确切的解决方案，我是React.js的新手，我试图从API获取temp数组中的数据，但无法弄清楚如何使用new状态，因为我已经在componentDidMount方法中使用了一个setState。

 Code till componentDidMount method:

   class Apiapp extends Component{
      constructor(){
      super()
      this.state = {
        loading:true,
        characters:{}
     }
    }
     componentDidMount(){
         // This means we can use the setState method as many times are we can depending on what 
        type of methods are we using
        // this.setState({
        //   loading:true
        // })
        fetch("https://pokeapi.co/api/v2/pokemon/5")
            .then(response => response.json())
            .then(data => {
             let tmpArray = []
             for (var i = 0; i < data.game_indices.length; i++) {
                tmpArray.push(data.game_indices[i])
             }
              console.log(data)
              this.setState({
              loading:false,
              characters:data
            })
            this.setState({
              loading:false,
              arrCharacters:tmpArray
            })
          })
      }

     Code of render method:

     render() {
      let text = this.state.loading ? <h2>Loading...</h2> : <div><h2> 
                {this.state.characters.name} 

                </h2>,<h2>{this.state.arrCharacters.name}</h2></div>

               // <h2>{this.state.characters.game_indices[0].version.name}</h2>

                return(<div>{text}</div>)
  }
}

我正在尝试获取“ game_indices”中的所有名称。

API链接：https：//pokeapi.co/api/v2/pokemon/ditto

乔纳森·欧文

不要过于复杂

import React, { Component } from 'react';

class ApiApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      characters: {},
    };
  }

  async componentDidMount() {
    const data = await fetch('https://pokeapi.co/api/v2/pokemon/5').then((response) => response.json());

    this.setState({ characters: data.game_indices, loading: false });
  }

  render() {
    return <div>{this.state.loading ? <h2>Loading...</h2> : this.state.characters.map((i) => i.version.name)}</div>;
  }
}

我不太确定您要显示什么数据-从问题中不清楚

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。