时间戳

首页 > 解决方案 > 如何从 API 获取数据，然后在完全加载后将其传递给另一个组件？

javascript - 如何从 API 获取数据，然后在完全加载后将其传递给另一个组件？

问题描述

我正在从 pokeApi 获取数据，然后将其传递给另一个组件。

componentDidMount() {
    fetch("https://pokeapi.co/api/v2/pokemon/")
    .then(resp => resp.json())
    .then(items =>{
        //console.log(items.results);
        items.results.forEach( item => {
            this.setState({pokemon:[...this.state.pokemon,item.name]})
            this.setState({url:[...this.state.url,item.url]})
 
        })});
}

 
render (){

    return (
        <div>
          
          <Fetchpokemon data={this.state}/>
         
         </div>
        )



}

当我控制台登录 Fetchpokemon 组件时，检索数据正在显示和更新。我只想显示一次数据。例如。它应该在 App.js 中完全加载，然后将数据发送到另一个组件。

标签： javascriptreactjsjsx

解决方案

你可以做这样的事情。添加状态变量名称加载并显示加载器，直到数据加载。然后我们渲染组件以显示数据。我还简化了数据加载逻辑，只调用一次 setState。

constructor() {
  this.state = {
    // Your initial state
    loading: true,
  }
}

componentDidMount() {
  fetch("https://pokeapi.co/api/v2/pokemon/")
    .then(resp => resp.json())
    .then(items => {
      const pokemon = [];
      const url = [];
      items.results.forEach(item => {
        pokemon.push(item.name);
        url.push(item.url);
      });
      this.setState({ pokemon, url, loading: false });
     });
}

render (){
  if (loading) {
    return <Loader />;
  }
  return (
    <div>
      <Fetchpokemon data={this.state}/>
    </div>
  );
}

推荐阅读