Javascript 反应本机API获取

我正试图使用下面的代码片段在react native中使用FetchAPI。每当我尝试console.log API数据数组时，它总是显示为“未定义”

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

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

module.exports = api;

---

这里的问题是使用

componentWillMount

获取数据。检查以下文档：

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

这是唯一一个在服务器渲染时调用的生命周期挂钩。通常地 我们建议改为使用构造函数（）

基本上，您需要使用

componentDidMount

。见：

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

---

顺便说一句，如果您是这样做的（直接进入组件），您需要确保处理响应出现并且组件已卸载的情况。在这种情况下，您可以使用

componentWillUnmount

在卸载组件之前取消任何请求。

这里的问题是使用

componentWillMount

获取数据。检查以下文档：

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

这是唯一一个在服务器渲染时调用的生命周期挂钩。通常地 我们建议改为使用构造函数（）

基本上，您需要使用

componentDidMount

。见：

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

---

顺便说一句，如果您是这样做的（直接进入组件），您需要确保处理响应出现并且组件已卸载的情况。在这种情况下，您可以使用

componentWillUnmount

在卸载组件之前取消任何请求。

我希望不会太晚，我也遇到了同样的问题，并偶然发现了您的问题。 您只需将

res.profile

更改为

res

。我确信您的json响应中没有

配置文件

数据

---

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

我希望现在还不算太晚，我也遇到了同样的问题，并且偶然发现了你的问题。 您只需将

res.profile

更改为

res

。我确信您的json响应中没有

配置文件

数据

---

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

尝试

console.log

res.data而不是

res.profile

这个解决方案不走运：/try

console.log

这个

res.data

而不是

res.profile

这个解决方案不走运：/

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