CODEWITHSUNDEEP
ajaxreactjs
corvallo
corvallo

Reputation: 169

Avoid double ajax call

I'm really new to React so I'm trying to manage it by made some examples. I made this component that made an ajax call to render a simple list.

import React from "react";
import axios from 'axios';
import Page from '../components/Page/Page';
import ListJobs from '../components/ListJobs/ListJobs';

let state ;
class Home extends React.Component{
    constructor(props){
        super(props);
        this.state ={jobs:[]};             
    }

    componentDidMount(){       
        var _this = this;           
        this.serverRequest = axios.get("http://codepen.io/jobs.json")
                                    .then(function(result){
                                        _this.setState({
                                        jobs:result.data.jobs
                                        });                                          
                                    });   
    }
    componentWillUnmount() {

    } 

    render(){             
        return( 
            <div>
                <Page title="Home">           
                    <p>Home</p>
                    <ul>                        
                        {this.state.jobs.map(function(job,index) {
                            return(
                                <ListJobs key={index} job={job}/>
                            );
                        })}
                    </ul>
                </Page>
            </div>
        );
    }
}
export default Home;

It calls another child component to render the li elements. Everytime I call this component it starts with this ajax call, so I was wondering if there is a way to save the result of this ajax call and re-use it, instead of launching every time the request. I tried to do like this https://jsfiddle.net/corvallo/mkp4w8vp/ But I receive this error in the developer console:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Home

Thank you in advance for your help

Upvotes: 2

Views: 633

Answers (1)

kkesley
kkesley

Reputation: 3406

If you want the ajax calls only when the app launches, then you can make ajax calls on the parent component (probably App) and then pass it as a props to the Home component

EDIT

if you want to call the ajax only from the component, I think you can implement a cache or some sort e.g using localstorage

example

componentDidMount(){
  let cache = JSON.parse(localStorage.getItem('homeCache') || "{}");
  if(cache.hasOwnProperty('cached') && cache.hasOwnProperty('jobs')){
     this.setState({jobs:cache.jobs});
  }else{
    (/*YOUR API HERE*/).then(function(result){
         _this.setState({jobs:result.data.jobs});
         localStorage.setItem('homeCache', JSON.stringify({cached: true, jobs: result.data.jobs}));
      });
  }
}

and everytime when the user exits the app, clear the cache (or anytime you want the cache to be cleared)

localStorage.setItem('homeCache', JSON.stringify({}));

I think that's one solution which popped out of my head right now..

Upvotes: 1

Related Questions