獲取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並使其數據可通過組件訪問

回答

相關問題