React Native API Fetch

Question

I'm trying to use fetch api in react native using following code snippet. Whenever I try to console.log the API data array it always comes up '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;

try to console.log the res.data instead of res.profile — Ivan Chernykh
– Ivan Chernykh, Commented Oct 26, 2016 at 10:22

Ferran Negre · Accepted Answer · 2016-10-26 10:18:34Z

The problem here is using componentWillMount to fetch data. Check these part of the docs:

componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore setting state in this method will not trigger a re-rendering. Avoid introducing any side-effects or subscriptions in this method.

This is the only lifecycle hook called on server rendering. Generally, we recommend using the constructor() instead.

Basically, you need to use componentDidMount. See here:

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

By the way, if you are doing it this way (directly into the component) you need to make sure to handle the case where the response comes and the component has been unmounted. In this case, you can use componentWillUnmount to cancel any requests before the component is unmounted.

femotizo · Accepted Answer · 2017-08-23 13:09:38Z

0

i hope its not too late, i had same issue and stumble on your question. all you have to do is change res.profile to res. am sure you dont have profile data in your json responce

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

i hope this helps someone in need.

answered Aug 23, 2017 at 13:09

femotizo

1,4452 gold badges14 silver badges18 bronze badges

Collectives™ on Stack Overflow

React Native API Fetch

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related