Question

我正在尝试使用以下代码片段在反应原生中使用fetch api。每当我尝试console.log API数据数组时，它总是出现'undefined'？！？！

Home.JS

import api from '../components/api';

class Home extends Component {

constructor(props){
 super(props);
 this.state = {
  profile: []
 }
}

componentWillMount(){
 api.getProfile().then((res) => {
  this.setState({
    profile: res.profile
   })
 });
}
render() {
 console.log("Profile: ", this.state.profile); // Console Out API Data
 return (
  <View style={styles.container}>
    <Text style={styles.welcome}></Text>
  </View>
  );
 }
};

API.JS

var api = {
 getProfile(){
    var url = 'https://api.lootbox.eu/xbl/us/Food%20Market/profile';
    return fetch(url).then((res) => res.json());
 }
};

module.exports = api;

Answer 1

此处的问题是使用componentWillMount来获取数据。查看以下part文档：

在安装发生之前立即调用componentWillMount（）。它   在render（）之前调用，因此在此方法中设置状态   不会触发重新渲染。避免引入任何副作用或   订阅此方法。

这是在服务器渲染上调用的唯一生命周期钩子。通常，   我们建议使用构造函数（）。

基本上，您需要使用componentDidMount。见here：

componentDidMount（）在组件出现后立即调用安装。需要DOM节点的初始化应该放在这里。如果你需要从远程端点加载数据，这是一个好地方实例化网络请求。在这种方法中设置状态会触发重新渲染。

顺便说一句，如果你这样做（直接进入组件），你需要确保处理响应来源和组件已卸载的情况。在这种情况下，您可以在卸载组件之前使用componentWillUnmount取消任何请求。

Answer 2

我希望它不会太晚，我有同样的问题，并且在你的问题上绊倒了。您所要做的就是将res.profile更改为res。我确定你的 json responce

中没有profile个数据

 componentWillMount(){
      api.getProfile().then((res) => {
      this.setState({
       profile: res
    })
  });
}

我希望这可以帮助有需要的人。

React Native API Fetch

2 个答案: