获取API并使其数据可通过组件访问

我在其中一个组件中获取API，并将其数据发送到dataAPI状态。它工作正常。获取API并使其数据可通过组件访问

但我想开始将我的应用分解成更小的组件。我希望能够从任何其他组件访问数据。而且我不想每次都要做一个不同的API调用。

这是我下面的组件，其中的数据被拉。从应用程序中访问API数据的最佳方式是什么？

我现在还在使用setInterval()来每分钟刷新一次数据。

谢谢！

export default class Home extends Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     dataAPI: [], 
     isLoading: true 
    }; 

    // Refresh data every 60 seconds (60,000 ms) 
    setInterval(() => { 
     this.componentDidMount(); 
    }, 60000); 

    } 

    componentDidMount() { 
    this.fetchData(); 
    } 

    render() { 
    var {isLoading} = this.state; 
    if(isLoading) 
     return this.renderLoadingMessage(); 
    else 
     return this.renderResults(); 
    } 

    fetchData() { 
    var url = 'https://www.myapi.com'; 
    fetch(url) 
     .then(response => response.json()) 
     .then(jsonData => { 
     var myData = []; 
     console.log(jsonData); 
     myData.push(jsonData); 

     this.setState({ 
      isLoading: false, 
      dataAPI: [].concat(myData) 
     }); 
     }) 
    .catch(error => console.log('Fetch error ' + error)); 
    } 

    renderLoadingMessage() { 
    return (
     <View> 
     <ActivityIndicator animating={true} /> 
     </View> 
    ); 
    } 

    renderResults() { 
    var {isLoading} = this.state; 
    var d = this.state.dataAPI[0]; 

    if (!isLoading) { 
     return (
     <View> 
      <Text> 
      {d.artist} 
      </Text> 
     </View> 
    ); 
    } 
    } 

}; 


AppRegistry.registerComponent('Home',() => Home);

来源

2016-11-28 Imalea

您需要一种模式将响应设置为“全局，应用程序级”状态容器。谷歌的“Redux”，“MobX”或“Flux”来理解这个概念。然后你可以从你想要的任何组件访问内容，因为它存储为一个状态树，并作为观察组件的道具传递。 – zvona

您可能想要使用react redux。

它有点难以设置，但一旦你已经设置好它的易于管理和你在应用程序的任何地方获取信息请参阅此链接：Getting started with Redux。

它涵盖了使用redux的不同方面。从一个简单的计数器例子开始。它还处理如何管理api调用，其中可以从应用程序的任何位置访问结果。

祝你好运！

来源

2016-11-28 04:11:46 Vicky

太棒了。谢谢。会做！ :) – Imalea

获取API并使其数据可通过组件访问

回答

相关问题