Javascript PokeAPI-获取口袋妖怪数据

我刚刚开始学习React，我正在尝试使用PokeAPI构建PokeDex，但是我很难理解如何从API获取数据。我想获取第一个384口袋妖怪相关信息。我在componentDidMount（）中编写了下面的代码，以提取我的主应用程序类组件中的完整数据，并将其推送到名为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>
    );
}

export const PokeList=（{pokemon}）=>{
console.log（口袋妖怪）；
返回(
{pokemon[0].id}
);
}

---

我收到一个错误，上面写着TypeError:无法读取null的属性“0”。RealDeaveDevices工具显示了被检索的值填充的状态以及设置的道具，但是它似乎认为它是NULL。任何人都可以帮助解决这个问题，看到这个错误是非常令人沮丧的

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

fetch（'https://pokeapi.co/api/v2/pokemon/?limit=2')
.then（response=>response.json（））
。然后（数据=>{
让结果=data.results；
让promisesArray=results.map（result=>{
返回fetch（result.url）.then（response=>response.json（））；
})
归还承诺。全部（承诺）；
}).then（（data）=>this.setState（{pokemon:data}，（）=>console.log（'Main pokemon State:'，this.State.pokemon））；

解释如下：

第1期：

原始代码：

let promisesArray=results.map（result=>{
返回fetch（result.url）.then（response=>response.json（））.then（data=>pokemonArray.push（data））；
})
回报承诺。全部（承诺）

最后一个

then（）

回调返回

pokemonArray.push（数据）

的结果

Array.push

返回数组的长度，因此

返回Promise.all（promisesArray）

返回数组长度的数组

将其更改为：

let promisesArray=results.map（result=>{
返回fetch（result.url）。然后（response=>response.json（））；//返回数据
})
回报承诺。全部（承诺）

第二期：

原始代码：

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））；

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

构造函数（道具）{
超级（道具）；
此.state={
口袋妖怪：[]，
};
}

因此，当您呈现PokeList（
）时，它将始终接收一个数组，尽管在获取数据之前它将是空的。
您的代码有两个问题。首先，这里是一个修改后的工作版本：

fetch（'https://pokeapi.co/api/v2/pokemon/?limit=2')
.then（response=>response.json（））
。然后（数据=>{
让结果=data.results；
让promisesArray=results.map（result=>{
返回fetch（result.url）.then（response=>response.json（））；
})
归还承诺。全部（承诺）；
}).then（（data）=>this.setState（{pokemon:data}，（）=>console.log（'Main pokemon State:'，this.State.pokemon））；

解释如下：

第1期：

原始代码：

let promisesArray=results.map（result=>{
返回fetch（result.url）.then（response=>response.json（））.then（data=>pokemonArray.push（data））；
})
回报承诺。全部（承诺）

最后一个
then（）
回调返回
pokemonArray.push（数据）
的结果
Array.push
返回数组的长度，因此
返回Promise.all（promisesArray）
返回数组长度的数组

将其更改为：

let promisesArray=results.map（result=>{
返回fetch（result.url）。然后（response=>response.json（））；//返回数据
})
回报承诺。全部（承诺）

第二期：

原始代码：

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））；

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

构造函数（道具）{
超级（道具）；
此.state={
口袋妖怪：[]，
};
}

因此，当您呈现PokeList（
）时，它将始终接收一个数组，尽管在获取数据之前它将是空的。
以下是我对重写获取代码的建议：

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


 }
...
}

我正在使用spread操作符将接收到的数据复制到pokemonArray。然后可以将阵列作为道具传递给组件。
希望这对您有所帮助。
以下是我对重写获取代码的建议：

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


 }
...
}

我正在使用spread操作符将接收到的数据复制到pokemonArray。然后可以将阵列作为道具传递给组件。
希望这对您有所帮助。
您的应用程序没有立即安装
pokemon
阵列；它必须等待抓取，所以你需要在口袋妖怪加载之前为口袋妖怪提供初始值和初始行为谢谢你，有一个条件帮助防止它再次出错你的应用程序没有立即的
口袋妖怪
数组；它必须等待抓取，所以你需要在口袋妖怪加载之前为它提供一个初始值和初始行为。谢谢，有一个条件可以帮助防止它再次出错