使用React Native時，如何保存提取結果？

Question

我目前正在編寫Android React Native應用程序，該應用程序由通過Ruby on Rails服務器提供的JSON API支持。我目前最大的困難是保存了fetch電話的結果。我的代碼如下：

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight, 
    Alert 
} from 'react-native'; 

class MiniMinionClient extends Component { 
    constructor(props) { 
    super(props); 
    } 

    getStatus() { 
    return fetch('http://10.0.2.2:3000/api/v1/status.json') 
     .then((response) => response.json()) 
     .then((responseJson) => { 
     return responseJson; 
     }) 
     .catch((error) => { 
     console.error(error); 
     }); 
    } 

    render() { 
    var status = this.getStatus() 
    return (
     <View style={styles.container}> 
     <Text>Version {status.version}</Text> 
     <Text>Last Update: {status.last_update}</Text> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     flexDirection: 'row', 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: '#F5FCFF', 
    } 
}); 

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

我不知道這是一個有效的端點，因爲我能夠做同樣的工作隨叫隨到，如果我用警惕的帖子，我計上心來從here。我認爲這個問題源於fetch的異步性質，但我不知道如何解決這個問題。

任何幫助將不勝感激！

Answer 1

以下是保存和訪問api調用結果的方法之一。調用API的最佳方式是從componentWillMount生命週期。這個生命週期在Component呈現之前被調用。

您可以直接在componentWillMount（）上使用您的api調用，也可以調用您創建的getStatus（）函數。

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight, 
    Alert 
} from 'react-native'; 

class MiniMinionClient extends Component { 
    constructor(props) { 
    super(props); 
    // Initialize empty state here 
    this.state = { 
     version: '', 
     last_update: '' 
    }; 
    } 
    componentWillMount() { 
    // It's best to use your api call on componentWillMount 
    this.getStatus(); 
    } 

    getStatus() { 
    fetch('http://10.0.2.2:3000/api/v1/status.json') 
     .then((response) => response.json()) 
     .then((responseJson) => { 
     // set the state of the output here 
     this.setState({ 
      version: responseJson.version, 
      last_update: responseJson.last_update 
     }); 
     }) 
     .catch((error) => { 
     console.error(error); 
     }); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     {/*You can now access the values using this.state here*/} 
     <Text>Version {this.state.version}</Text> 
     <Text>Last Update: {this.state.last_update}</Text> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    } 
}); 

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