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

Question

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?

Code seems fine to me -- are you sure the `someURL` is not returning an empty object? — Christian Santos, Dec 10 '17 at 00:02
OK. I am facing another problem. In component 'MyTable' when I use data.results.findIndex(...), I get an error: 'Uncaught TypeError: Cannot read property 'findIndex' of undefined'. findIndex() in a method, so what is wrong here? I added full expression above.. — Mike26, Dec 10 '17 at 14:21

score 1 · Answer 1 · answered Sep 14 '18 at 02:42

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
}

score 0 · Answer 2 · answered Dec 10 '17 at 00:05

0

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/

answered Dec 10 '17 at 00:05

Scott Hillson

900
1
12
30

causes an error: Property 'list' does not exist on type 'Readonly<{}>'. – Mike26 Dec 10 '17 at 00:17
That error is hard to pinpoint without seeing the rest of your class(es). See this question: https://stackoverflow.com/questions/47561848/property-value-does-not-exist-on-type-readonly – Scott Hillson Dec 10 '17 at 00:26
I've just updated my code with the class deffinition – Mike26 Dec 10 '17 at 00:40

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

2 Answers2