Wie können Sie die Ergebnisse eines Abrufs bei der Verwendung von Native React speichern?

Question

Ich schreibe gerade eine Android React Native App, die von einer JSON API bedient wird, die über einen Ruby on Rails Server bedient wird. Mein größter Fehler hat derzeit die Ergebnisse eines fetch Anrufs gespeichert. Mein Code ist wie folgt:

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

Ich weiß, dass dies ein gültiger Endpunkt ist, wie ich in der Lage war, die gleiche Anruf Arbeit zu machen, wenn ich alert Beiträge verwenden, die ich auf die Idee von here bekam. Ich denke, das Problem rührt von der asynchronen Natur von fetch her, aber ich bin mir nicht sicher, wie ich das umgehen soll.

Jede Hilfe wäre sehr willkommen!

Answer 1

Hier ist eine der Möglichkeiten zu speichern und Zugriff auf das Ergebnis Ihrer API-Anrufe. Der beste Weg, um Ihre API aufzurufen ist von componentWillMount Lebenszyklus. Dieser Lebenszyklus wird kurz vor dem Rendern der Komponente aufgerufen.

Sie können Ihren API-Anruf entweder direkt unter componentWillMount() verwenden oder die von Ihnen erstellte Funktion getStatus() aufrufen.

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