Ruby on rails 使用React Native时，如何保存提取结果？

我目前正在编写一个Android React本机应用程序，该应用程序由一个通过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);

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
看法
触控高光，
警觉的
}从“反应本机”；
类MiniminoClient扩展组件{
建造师（道具）{
超级（道具）；
}
getStatus（）{
返回获取（'http://10.0.2.2:3000/api/v1/status.json')
.then（（response）=>response.json（））
.然后（（responseJson）=>{
返回响应；
})
.catch（（错误）=>{
控制台错误（error）；
});
}
render（）{
var status=this.getStatus（）
返回(
版本{status.Version}
上次更新：{status.Last_Update}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'行'，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
}
});
AppRegistry.registerComponent（'MinimiOnClient'，（）=>MinimiOnClient）；

我确实知道这是一个有效的端点，因为如果我使用警报帖子，我能够使相同的呼叫工作，这是我从中得到的想法。我认为这个问题源于

fetch

的异步特性，但我不确定如何解决这个问题

---

任何帮助都将不胜感激

以下是保存和访问api调用结果的方法之一。调用api的最佳方法是从组件willmount生命周期。在呈现组件之前，将调用此生命周期

您可以直接在组件willmount（）上使用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);

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
看法
触控高光，
警觉的
}从“反应本机”；
类MiniminoClient扩展组件{
建造师（道具）{
超级（道具）；
//在此初始化空状态
此.state={
版本：“”，
上次更新：“”
};
}
组件willmount（）{
//最好在componentWillMount上使用api调用
这是getStatus（）；
}
getStatus（）{
取（'http://10.0.2.2:3000/api/v1/status.json')
.then（（response）=>response.json（））
.然后（（responseJson）=>{
//在此处设置输出的状态
这是我的国家({
版本：responseJson.version，
最后更新：responseJson.last\u update
});
})
.catch（（错误）=>{
控制台错误（error）；
});
}
render（）{
返回(
{/*您现在可以使用this.state here*/}访问这些值
版本{this.state.Version}
上次更新：{this.state.Last_Update}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'行'，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
}
});
AppRegistry.registerComponent（'MinimiOnClient'，（）=>MinimiOnClient）；

以下是保存和访问api调用结果的方法之一。调用api的最佳方法是从组件willmount生命周期。在呈现组件之前，将调用此生命周期

您可以直接在组件willmount（）上使用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);

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
看法
触控高光，
警觉的
}从“反应本机”；
类MiniminoClient扩展组件{
建造师（道具）{
超级（道具）；
//在此初始化空状态
此.state={
版本：“”，
上次更新：“”
};
}
组件willmount（）{
//最好在componentWillMount上使用api调用
这是getStatus（）；
}
getStatus（）{
取（'http://10.0.2.2:3000/api/v1/status.json')
.then（（response）=>response.json（））
.然后（（responseJson）=>{
//在此处设置输出的状态
这是我的国家({
版本：responseJson.version，
最后更新：responseJson.last\u update
});
})
.catch（（错误）=>{
控制台错误（error）；
});
}
render（）{
返回(
{/*您现在可以使用this.state here*/}访问这些值
版本{this.state.Version}
上次更新：{this.state.Last_Update}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'行'，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
}
});
AppRegistry.registerComponent（'MinimiOnClient'，（）=>MinimiOnClient）；

您能提供

responseJson

的输出或json文件的数据吗？如果我知道格式，我可以提供完整的工作代码。函数返回的值是Promise对象，json文件的数据是{“version”：“0.0.1”，“last_update”：“07/27/2016 at 06:15AM”}您可以提供

responseJson

的输出或json文件的数据吗？如果我知道格式，我可以提供完整的工作代码。函数返回的值是Promise对象，json文件的数据是{“version”：“0.0.1”，“last_update”：“07/27/2016 at 06:15AM”}非常感谢！这就成功了。我缺乏JS、Async和React Native方面的经验，这让我觉得有点挑战性。我感谢你的支持。在做更多研究的同时，我也看到了这篇文章。这一个使用componentDidMount（）和componentWillMount（），它们是相同的，还是提供了不同的好处？您应该了解有关React生命周期的更多信息。这是你必须注意的最重要的话题之一。T