Sorry for the joke in the title.

I am currently exploring the fetch API in react native, but I have bumped in to some issues which I cannot wrap my head around.

So, I am trying to get a message from a server, which I am calling with the fetch API in the following manner:

var serverCommunicator = {
    test: function() {
        fetch(baseUrl  , {
          method: 'GET',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          }
        })
        .then((response) => response.text())
        .then((responseText) => {
             return (JSON.stringify(responseText));
        })
        .catch((error) => {
          console.warn(error);
        }).done();
    },
module.exports = serverCommunicator;

When I tested using only console.log(responseText) my log gave me the correct message. However, now when I wanna try to put the content in the code as a message in a View it does not return as expected. Calling it in the following manner:

import Method from '../Services/Methods';
.
.
.
<View style={styles.card}>
   <CardView
      message={Method.test()} 
    />

I can see how the function test is called properly when calling it like this, but for some reason, it does not write the message.

Sorry for the joke in the title.

I am currently exploring the fetch API in react native, but I have bumped in to some issues which I cannot wrap my head around.

So, I am trying to get a message from a server, which I am calling with the fetch API in the following manner:

var serverCommunicator = {
    test: function() {
        fetch(baseUrl  , {
          method: 'GET',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          }
        })
        .then((response) => response.text())
        .then((responseText) => {
             return (JSON.stringify(responseText));
        })
        .catch((error) => {
          console.warn(error);
        }).done();
    },
module.exports = serverCommunicator;

When I tested using only console.log(responseText) my log gave me the correct message. However, now when I wanna try to put the content in the code as a message in a View it does not return as expected. Calling it in the following manner:

import Method from '../Services/Methods';
.
.
.
<View style={styles.card}>
   <CardView
      message={Method.test()} 
    />

I can see how the function test is called properly when calling it like this, but for some reason, it does not write the message.

• javascript
• react-native
• fetch-api

Share Improve this question Follow edited May 4, 2016 at 18:41 Bergi 667k161161 gold badges1k1k silver badges1.5k1.5k bronze badges asked May 4, 2016 at 18:35 Niklas LindekeNiklas Lindeke 39011 gold badge77 silver badges2525 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

This is a classic async issue, where your then function returns after render has already been called, with nowhere to return to.

Most mon solution: display empty state message / loading indicator and fetch your server info when your ponent mounts. When your promise returns and then callback is fired, set the ponent state which will trigger a re-render, with your expected value.

class extends React Component

class YourComponent extends Component {
  constructor() {
    super()
    this.state.text = 'Loading, please wait!' // default text
  }

  ponentDidMount() {
    fetch(baseUrl, options)
      .then((response) => response.text())
      .then((responseText) => {
         this.setState({ text: responseText }) // this triggers a re-render!
      })
  }

  render() {
    return (
      <View style={styles.card}>
        <CardView
          message={this.state.text} // <-- will change when fetch call returns
        />
      </View>
    )
  }

}

React.createClass

var YourComponent = React.createClass({
  getInitialState() {
    return { text: 'Loading, please wait!' }
  }, // <-- ma between functions, because object keys

  ponentDidMount() {
    fetch(baseUrl, options)
      .then((response) => response.text())
      .then((responseText) => {
         this.setState({ text: responseText }) // this triggers a re-render!
      })
  },

  render() { /* ..same as above.. */ }
})

If you want to keep your current architecture where the fetch call is in the service, you need to return the initial call to fetch, which will return a promise. Then you can hook up then in your constructor:

var serverCommunicator = {
  test: function() {
    return fetch(baseUrl, options) // return a promise! ..important!
      .then((response) => response.text())
      .then((responseText) => {
         return responseText
      })
  }
}

Then your imported function will return a promise..

import Method from '../Services/Methods'

...

ponentDidMount() {
  Method.test().then(responseText => {
    this.setState({ text: responseText })
  })
]

  ....

Hope that clears things up a bit about how promises work, and how to capture async data using state in React!