React Native: API is not calling on 2nd time(fetch/axios)

Question

I am creating react-native app using fetch method to get the data from API but when I am build the app(remove and install new app) that time it is calling API called but on 2nd time it is not. I have also uses

componentDidMount, componentWillMount

but not work for me. following is my code:

export default test extends Component{
_isMounted = false;
constructor(props){
  super(props);
  this.state = {
      showList:[]
 }
}
componentDidMount() {
    let currentComponent = this;
     currentComponent._isMounted = true;
    fetch(API_URL, {
        method: 'GET',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        }
    }).then((response) => { return response.json()})
    .then((responseJson) => {
        console.warn("responseJson: ", responseJson);
        if(currentComponent._isMounted){
         currentComponent.setState({showList: responseJson.data});
        }

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

}
componentWillUnmount(){
    this._isMounted = false
}

}

I have add full code here. this is only called on first time, after that it will get only from cache(I think).Please help me. Thanks

`componentDidMount` is only called once. Also note that `componentWillMount` is deprecated and you should not use it. — Andrew, Mar 02 '19 at 15:28
ohh! Thanks. But how can I call the API when I am go to that screen? — Vipul Bhagwat, Mar 02 '19 at 15:33
Are you using a stack navigator? if then stack navigator uses cache like mechanism that is loading the screens in the stack if they are pre-visited. Or else can you post the full code here. — buddhiv, Mar 03 '19 at 18:07

score 1 · Answer 1 · answered Mar 07 '19 at 07:47

I'd look into the onEnter hook on your scene using react-native-router-flux.

Something like this should work:

class Test extends Component {
  static onEnter() {
    fetch(API_URL, {
        method: 'GET',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        }
    }).then((response) => { return response.json()})
    .then((responseJson) => {
        console.warn("responseJson: ", responseJson)
        if (currentComponent._isMounted) {
         currentComponent.setState({ showList: responseJson.data })
        }

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

(if you need to access this in the method, here is an idea)

React Native: API is not calling on 2nd time(fetch/axios)

1 Answers1