5

I am very new with React and I am trying to call the data from server with fetch api.

If I want to make a helper class to get the data like this one 

import { Promise } from 'es6-promise';
import fetch from 'isomorphic-fetch';
let responseData = response => {
  return response;
};

let getData = (dataURL, headers) => {
  let result = {
    data: [],
    message: ''
  };
  if (dataURL === null || dataURL === undefined || dataURL === '') {
    result.message = 'URL is not correct';
    responseData(result);
  }
  fetch(dataURL, headers)
    .then(response =>{
      if (response.ok) {
        response.json().then(data => {
          result.data = data;
          result.message = response.statusText;
          responseData(result);
        });
      }else{
        result.message = 'Network response was not ok.';
        responseData(result);
      }
    })
    .catch(err => console.log(err));
};

exports.responseData = responseData;
exports.getData = getData;

and whenever the data is available, I will ask the React render the view, during the waiting time, it will show a loading icon.

I put the call inside componentDidMout but by the time it is executed, the result is always undefined.

componentDidMount() {
    var self = this;
    let result = util.getData('http://localhost:3001/menus');
    const { dispatch } = this.props;
    // dispatch(menuActions.fetchMenusIfNeeded());
    if (result !== null && result !== undefined) {
      if (this.isMounted()) {
        this.setState({
          items: result.data.results
        });
      }
    }
  }

In Angular, whenever the data is available, it will be updated accordingly but I really don't understand how to do it in React.

EDIT 1: Update the helper class:

import { Promise } from 'es6-promise';
import fetch from 'isomorphic-fetch';


let getData = (dataURL, headers) => {
  return fetch(dataURL, headers);
};

exports.getData = getData;

It will always return a Promise so I can chain handler for data in other components. The only problem that I need to handle the message return by reading Response object in my components.

In React component:

componentWillMount() {
    util.getData('http://localhost:3001/menus')
      .then(response =>{
        if (response.ok) {
          response.json().then(data => {
            console.log(data);
            this.setState({
              items: data.result
            });
          });
        }
      })
      .catch(err => console.log(err));
  }

But whenever it received the data, the render() function already finished, should I force it to update again?

Improve this question
3
  • you don't return anything from getData function but even if you did return result, this is async so you won't see result in componentDidMount. Commented Aug 5, 2016 at 17:13
  • I understood the problem, but whenever I return a Promise, how should I inform React to update the render() functions. Commented Aug 8, 2016 at 10:24
  • 1
    An article that answers all the questions around how, when and where to fetch data in React: How to fetch data in React. Perhaps it helps people to learn about it when they stumble across this question. Commented Aug 10, 2017 at 17:57

2 Answers 2

Reset to default
3

result is not the data, it is a Promise, which can you use to access the data. You need to return the Promise from fetch and also need to return the data from your then within getData, and update your React code.

getData change

 return fetch(dataURL, headers)
  .then(response =>{
     if (response.ok) {
       response.json().then(data => {
         result.data = data;
         result.message = response.statusText;
         return responseData(result);
       });
     } else {
       result.message = 'Network response was not ok.';
       return responseData(result);
     }
  })
  .catch(err => console.log(err));

React change

componentDidMount() {
   var self = this;
   let result = util.getData('http://localhost:3001/menus');
   const { dispatch } = this.props;
   // dispatch(menuActions.fetchMenusIfNeeded());
   result.then((data) => {
      if (this.isMounted()) {
        this.setState({
          items: data.results
        });
      }
   });
 }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

thank for your answer, I tried to put then() for the result but the result is always undefined, should I try to return result directly from fetch?
could you look at my edited function call? how should I let React know about the data and update the render()
Two thoughts, are use sure you this condition is true?: if (response.ok) {, either way, I think the issue might be that you are initializing your state with: data: [] but you are setting the result into state at items:. You probably need to to update to: this.setState({ data: data.results }), assuming your render function is operating on data and not items
When I put console.log inside, I always saw the data has been logged so I think the if(reponse.ok) is truthy, I didn't init the data first, I just set the items through the function, is this the right way to do or should I try to init a this.props.items = [] first?
1

You should not try to delay the rendering and/or mounting of the component until you get a response. Instead you should make use of callbacks to make sure that everything gets updated as you wish once the request is over.

You only need to modify the code for getData so that it executes a callback once the request is over. You have two options here.

  1. Make the getData function accept a third parameter callback and call this method once you handle the response. This would roughly look like the following:
let getData = (dataURL, headers, callback) => {
  let result = {
    data: [],
    message: ''
  };
  if (dataURL === null || dataURL === undefined || dataURL === '') {
    result.message = 'URL is not correct';
    responseData(result);
  }
  fetch(dataURL, headers)
    .then(response =>{
      if (response.ok) {
        response.json().then(data => {
          result.data = data;
          result.message = response.statusText;
          responseData(result);
        });
      }else{
        result.message = 'Network response was not ok.';
        responseData(result);
      }
      callback(result);
    })
    .catch(err => console.log(err));
};

Keep in mind that this is not how an actual implementation would look. In case of an exception the callback wouldn't be invoked and the calling code would never know what happened. But in essence, this is how it would work.

  1. Make the getData function return the Promise created by the fetch API. This is the one I'd use personally because it looks cleaner and I'd take Promises over callbacks any day of the week. 
let getData = (dataURL, headers) => {
  let result = {
    data: [],
    message: ''
  };
  if (dataURL === null || dataURL === undefined || dataURL === '') {
    result.message = 'URL is not correct';
    responseData(result);
  }
  return fetch(dataURL, headers)
    .then(response =>{
      if (response.ok) {
        response.json().then(data => {
          result.data = data;
          result.message = response.statusText;
          responseData(result);
        });
      }else{
        result.message = 'Network response was not ok.';
        responseData(result);
      }
      return result;
    })
    .catch(err => console.log(err));
};

Just adding the return keyword would return the Promise and then you would be able to chain handlers to your heart's desire.

OK, how do we make use of this? It's actually pretty straightforward. You now have the ability to tell the getData method to do something once a Response is received (or an exception raised).

Just as an example, you could do this in your React component's componentWillMount method.

componentWillMount() {
    getData('http://example.com', new Headers())
        .then(function(result) {
            this.setState({ items: result });
        });
}

You can also control the loading panel by setting a flag in the state before the request and resetting it after the request (with callbacks of course).

Improve this answer

2 Comments

If I don't return the fetch directly, I will always receive a blank object or undefined, is there any way to make a Promise return in this case?
I don't think 'this' from the react component will be in scope anymore during that callback

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.