使用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);