react-native async function returns promise but not my json data?

Question

I'm learning react-native, and I'm running into an issue. Why does getting data on return from an async function return a promise, but in the async function itself, it correctly returns an array of objects?

On componentDidMount(), I call my async function which in turn does a fetch to an api url:

  componentDidMount() {
    let data = this.getData();
    console.log(data);    // <-- Promise {_40: 0, _65: 0, _55: null, _72: null}
    this.setState({
      dataSource:this.state.dataSource.cloneWithRows(data),
    })  
  }

  async getData() {
    const response = await fetch("http://10.0.2.2:3000/users", {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            }   
        }); 
    const json = await response.json();
    console.log(json);     // <-- (5) [Object, Object, Object, Object, Object]
    return json;
  }

In console.log(json), I get the correct list of json objects, and I can access them with json[0].name. But later, console.log(data) returns a promise with odd data:

Promise {_40: 0, _65: 0, _55: null, _72: null}

... and I can no longer find my json objects. Why is this? More importantly, how can I retrieve my json data in componentDidMount() so that I can set it as the dataSource?

`async` functions return promises. `await` magically "unwraps" that promise. `let data = this.getData();` doesn't (and cannot use) `await`, so you have to handle the promise the "normal" way. If you are not familiar with promises I recommend to read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises (this has nothing to do with react native btw, that's JavaScript). — Felix Kling, Jul 19 '17 at 20:59

score 29 · Accepted Answer · edited May 07 '19 at 15:40

29

Since getData() is a promise, you should be able to obtain the data in a then block as follows:

componentDidMount() {
  this.getData()
    .then((data) => {
      this.setState({
        dataSource:this.state.dataSource.cloneWithRows(data),
      })  
    });
}

edited May 07 '19 at 15:40

Fabrizio Bertoglio

5,890
4
16
57

answered Jul 19 '17 at 20:57

Anthony Ngene

746
8
12

score 7 · Answer 2 · answered Jan 31 '18 at 17:00

7

Another approach similar to the original code of the questioner:

async componentDidMount() {
    let data = await this.getData();
    console.log(data);    
    this.setState({
      dataSource:this.state.dataSource.cloneWithRows(data),
    })  
  }

answered Jan 31 '18 at 17:00

itinance

11,711
7
58
98

score 0 · Answer 3 · answered Nov 05 '19 at 14:44

Or another way is

  async componentDidMount() {
    const { data: dataSource = [] } = await this.getData();   
    this.setState({dataSource})  
  }

This will copy your data to a inmutable object an reasign the name, also, set a default value to the object dataSource

react-native async function returns promise but not my json data?

3 Answers3

Linked