fetching of json from url is stuck - json

Question

Trying to fetch some json from the following url: https://talaikis.com/api/quotes/random/
I'm using an activity indicator while waiting for the json to be fetched. That apparently never happens and so the app just displays the activity indicator. I tried using the sample that is provided in the networking tutorial in the official react native documentation
Here is the code:
import React, { Component } from 'react';
import {AppRegistry, StyleSheet, Text, View, ActivityIndicator} from 'react-native';
import Header from '../header/Header';
export default class SingleQuote extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
}
}
loadingQuoteFromUrl(){
return fetch('https://talaikis.com/api/quotes/random/')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson,
}, function(){
});
})
.catch((error) =>{
console.error(error);
});
}
render() {
var style = require("./styles.js");
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
return (
<View style={style.container}>
<Header text="Daily Quote" />
<View style={style.textContainer}>
<Text
adjustsFontSizeToFit
numberOfLines={3}
style={style.textStyle}
>
{this.state.dataSource.quote}
</Text>
<Text
adjustsFontSizeToFit
numberOfLines={1}
style={style.textStyle}
>
{this.state.dataSource.author}
</Text>
</View>
</View>
);
}
}

Answer 1

You are not invoking loadingQuoteFromUrl anywhere in your App. For fetch operations componentDidMount is a suitable lifecycle method. So, you can use it. But first, you should bind this function in order to use this context. You can do this in the constructor or define it as an arrow function without binding.
class SingleQuote extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
};
this.loadingQuoteFromUrl = this.loadingQuoteFromUrl.bind(this);
}
componentDidMount() {
this.loadingQuoteFromUrl();
}
loadingQuoteFromUrl() {
return fetch("https://talaikis.com/api/quotes/random/")
.then(response => response.json())
.then(responseJson => {
this.setState(
{
isLoading: false,
dataSource: responseJson
},
function() {}
);
})
.catch(error => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return <div>Loading...</div>;
}
return (
<div>
<div>
<p>{this.state.dataSource.quote}</p>
<p>{this.state.dataSource.author}</p>
</div>
</div>
);
}
}
ReactDOM.render(<SingleQuote />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

class SingleQuote extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
};
}
componentDidMount() {
this.loadingQuoteFromUrl();
}
loadingQuoteFromUrl = () => {
return fetch("https://talaikis.com/api/quotes/random/")
.then(response => response.json())
.then(responseJson => {
this.setState(
{
isLoading: false,
dataSource: responseJson
},
function() {}
);
})
.catch(error => {
this.setState(
{
isLoading: false,
}
console.error(error);
});
}
render() {
const { isLoading } = this.state;
const { dataSource } = this.props;
if (isLoading) {
return <div>Loading...</div>;
}
return (
<div>
<div>
<p>{dataSource.quote}</p>
<p>{dataSource.author}</p>
</div>
</div>
);
}
}
ReactDOM.render(<SingleQuote />, document.getElementById("root"));