PokeAPI -获取口袋妖怪数据

Question

我刚刚开始学习React，我正在尝试使用PokeDex构建一个PokeAPI，但是我很难理解如何从PokeAPI中获取数据。我想获取第一个384口袋妖怪相关的信息。我在下面的componentDidMount()中编写了这段代码，以提取我的主要App类组件中的完整数据，并将其推到一个名为pokemonArray的数组中，然后将其设置为我的状态。

let pokemonArray = [];
/* First API fetch call to return names and URL's of first 384 Pokemon after promise is resolved.*/
fetch('https://pokeapi.co/api/v2/pokemon/?limit=384')
  .then(response => response.json())
  .then(data => {
    let results = data.results;
    let promisesArray = results.map(result => {
      return fetch(result.url).then(response => response.json()).then(data => pokemonArray.push(data));
    })
    return Promise.all(promisesArray)
  }).then(this.setState({ pokemon: pokemonArray }, () => console.log('Main Pokemon State: ', this.state.pokemon)));

}

在我的呈现方法中，我希望将这个新设置的状态作为支柱传递给一个名为PokeList的组件，如下所示

<PokeList pokemon={this.state.pokemon} />

一旦我传递它并尝试在我的PokeList组件中呈现它，如下所示

export const PokeList = ({ pokemon }) => {
    console.log(pokemon);

    return (
        <div className="pokecard-container">
            <h1>{pokemon[0].id}</h1>
        </div>
    );
}

我收到一个错误，上面写着TypeError:无法读取空的属性'0‘。工具显示使用检索到的值填充状态，以及设置道具，但它似乎认为它为空。有人能帮我解决这个问题吗?看到这个错误出来真是令人沮丧

Answer 1

您的代码有两个问题。首先，下面是一个修改后的工作版本：

fetch('https://pokeapi.co/api/v2/pokemon/?limit=2')
  .then(response => response.json())
  .then(data => {
    let results = data.results;
    let promisesArray = results.map(result => {
      return fetch(result.url).then(response => response.json());
    })
    return Promise.all(promisesArray);
  }).then((data) => this.setState({ pokemon: data }, () => console.log('Main Pokemon State: ', this.state.pokemon)));

并解释如下：

第1期：

原始代码：

let promisesArray = results.map(result => {
  return fetch(result.url).then(response => response.json()).then(data => pokemonArray.push(data));
})
return Promise.all(promisesArray)

最后一个then()回调返回pokemonArray.push(data)的结果。Array.push返回数组的长度，因此return Promise.all(promisesArray)返回数组长度的数组。

改为：

let promisesArray = results.map(result => {
  return fetch(result.url).then(response => response.json()); // Returns the data
})
return Promise.all(promisesArray)

第2期：

原始代码：

then(this.setState({ pokemon: pokemonArray }, () => console.log('Main Pokemon State: ', this.state.pokemon)));

必须向then()提供回调函数

.then((data) => this.setState({ pokemon: data }, () => console.log('Main Pokemon State: ', this.state.pokemon)));

还必须记住在创建组件时初始化状态：

constructor(props) {
  super(props);

  this.state = {
    pokemon: [],
  };
}

因此，当您呈现PokeList (<PokeList pokemon={this.state.pokemon} />)时，它将始终接收一个数组，尽管在获取数据之前它将是空的。

Answer 2

下面是我的建议，重写您的获取代码：

class App extends Component{
 state = {
   pokemonArray : []
 }
 componentDidMount = () =>{
   fetch('https://pokeapi.co/api/v2/pokemon/?limit=384')
   .then(response => response.json())
   .then(data => {
      let results = data.results;
      this.setState({ pokemonArray : [...results]})
     console.log("Here are my pokemons",   this.state.pokemonArray)
     })


 }
...
}

我使用扩展操作符将接收到的数据复制到pokemonArray。然后，可以将数组作为支柱传递给组件。希望这能帮到你。