При использовании React Native, как сохранить результаты выборки?

Question

В настоящее время я нахожусь в написании приложения Android React Native, работающего на JSON-апи, обслуживаемом сервером Ruby on Rails. Моя самая большая ошибка в настоящее время сохраняет результаты вызова 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 lifecycle. Этот жизненный цикл вызывается непосредственно перед визуализацией компонента.

Вы можете либо использовать свой вызов api непосредственно на componentWillMount(), либо вызвать функцию 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);