CODEWITHSUNDEEP
jsonajaxreactjstypescript
Mike26
Mike26

Reputation: 119

How to efficiently fetch data from URL and read it with reactjs?

I have some URL with json and need to read data. For the sake of this example json looks like this: 

{
   "results": [
        ...
     ],

   "info": {
        ...
     }
}

I want to return fetched data as a property of a component. What is the best way to do it? I tried to do that with axios. I managed to fetch data, but after setState in render() method I received an empty object. This is the code:

export default class MainPage extends React.Component {

constructor(props: any) {
   super(props);
   this.state = {
       list: {},
       };
   }

   public componentWillMount() {
       axios.get(someURL)
       .then( (response) => {
           this.setState({list: response.data});
           })
       .catch( (error) => {
           console.log("FAILED", error);
        });
     }

   public render(): JSX.Element {

     const {list}: any = this.state;
     const data: IScheduler = list;

     console.log(data); // empty state object

     return (
        <div className="main-page-container">
           <MyTable data={data}/>  // cannot return data
        </div>
     );
   }
}

I don't have a clue why in render() method the data has gone. If I put 

console.log(response.data);

in .then section, I get the data with status 200.

So I ask now if there is the other way to do that. I would be grateful for any help.

----Updated---- In MyTable component I got an error after this:

const flightIndex: number 
= data.results.findIndex((f) => f.name === result);

Error is:

Uncaught TypeError: Cannot read property 'findIndex' of undefined

What's wrong here? How to tell react this is not a property?

Upvotes: 1

Views: 1485

Answers (2)

Anthony Manning-Franklin
Anthony Manning-Franklin

Reputation: 5008

Before the request is returned, React will try to render your component. Then once the request is completed and the data is returned, react will re-render your component following the setState call.

The problem is that your code does not account for an empty/undefined data object. Just add a check, i.e.

if (data && data.results) {
    data.results.findIndex(...);
} else {
    // display some loading message
}

Upvotes: 1

Scott Hillson
Scott Hillson

Reputation: 853

In React, after you have stored your ajax result in the state of the component (which you do appear to be doing), you can retrieve that result by calling this.state.list

So to make sure this is working properly, try <MyTable data={this.state.list}>

https://daveceddia.com/ajax-requests-in-react/

Upvotes: 0

Related Questions