Exporting JSON from fetch in React Native

Question

I am working on exporting the JSON I get from a fetch. I know I have a binding issue, but I'm not completely sure on how I should proceed to bind my function to the current component. I have a quick example at this URL https://snack.expo.io/@mcmillster/c21pbG.

app.js

  import React from 'react';
    import { FlatList, ActivityIndicator, Text, View  } from 'react-native';
    import { getMovies } from './utility.js';

    export default class FetchExample extends React.Component {

    constructor(props){
      super(props);
      this.state ={ 
      isLoading: true,
    }
    this.getMovies = getMovies.bind(this)
    }

    componentDidMount(){
    this.getMovies;
    }



    render(){

      if(this.state.isLoading){
        return(
          <View style={{flex: 1, padding: 100}}>
            <ActivityIndicator/>
          </View>
        )
      }

      return(
        <View style={{flex: 1, paddingTop:20}}>
          <FlatList
            data={ this.state.data }
            renderItem={({item}) => <Text>{item.title}, {item.releaseYear} 
 </Text>}
            keyExtractor={({id}, index) => id}
          />
        </View>
      );
    }
  }

utility.js

export function getMovies() {
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          data: responseJson.movies,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
    }

AnonymousSB · Accepted Answer · 2018-12-11 23:36:21Z

0

In your componentDidMount lifecycle hook, you're not calling the getMovies function, you're just referencing it. Change this.getMovies to this.getMovies()

Solution

componentDidMount(){
  this.getMovies();
}

answered Dec 11, 2018 at 23:36

AnonymousSB

3,58215 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Over a year ago

Thank you for the help. Didn't realize I was there and simply forgot to actually call the function.

Milore · Accepted Answer · 2018-12-11 23:51:40Z

0

I think you should not try to set the state from your fetch function. Just call it, return data and handle them in your component.

app.js

[...]
private getMovies = async() => {
  const movies = await getMovies();
  if(movies){
    this.setState({...})
}

componentDidMount(){
  this.getMovies();
}

utility.js

export function getMovies() {
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) =>{
        console.error(error);
        return;
      });
    }

answered Dec 11, 2018 at 23:51

Milore

1,6721 gold badge18 silver badges21 bronze badges

2 Comments

Ryan Over a year ago

Is there an advantage to doing it this way, or is this a more proper way of importing the fetch?

Milore Over a year ago

This way your function is ignorant, does not know what happens in the component that call it. Also you can reuse it simpler and, in my opinion, it's more coherent and consistent.

Collectives™ on Stack Overflow

Exporting JSON from fetch in React Native

2 Answers 2

Solution

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related