I'm trying to render a react native ponent from an id, which is given to a http request and in turn returns json that the ponent can use. Since the http request is async, the data that is passed into the PostCard render is undefined. I tried to get around this by awaiting the return of getSinglePost, but data still remains undefined. In case it is unclear, the render function calls the renderCard function, which is supposed to wait for json from the getSinglePost function, which then returns a filled PostCard react ponent. Any ideas?

  async getSinglePost(id: string) {
    try {
      let url = preHTT + apiURL + port + 'post/id';
      url = url + '?postId=' + id;
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
      });
      const responseJson: any = await response.json();
      // we should do better error handling gracefully
      if (responseJson['status'] === 'ERROR') {
        throw 'Could not retrieve data';
      }
      // console.log(responseJson['payload']);
      return responseJson['payload'];
    } catch (error) {
      console.error(error);
    }
  }

  async renderCard(id: string, type: string) {
    if (type === 'post') { ***here***
        const data = await this.getSinglePost(id);
        return <PostCard data={data} goToProfile={this.moveToProfileScreen}/>;
    } else {
      return <EventCard goToProfile={this.moveToProfileScreen}/>;
    }
}


        ***render/return stuff above***
        {this.state.markers.map((marker:any)  => (
          <Marker // marker on press function eventually
            key={marker['postid']}
            coordinate={marker['location']}
            image={this.emojiDict[marker['type']]}
            >
            <Callout>
              <View flex>
                {this.renderCard(marker['postId'], marker['contentType'])}
              </View>
            </Callout>
          </Marker>
        ***render/return stuff above***

I'm trying to render a react native ponent from an id, which is given to a http request and in turn returns json that the ponent can use. Since the http request is async, the data that is passed into the PostCard render is undefined. I tried to get around this by awaiting the return of getSinglePost, but data still remains undefined. In case it is unclear, the render function calls the renderCard function, which is supposed to wait for json from the getSinglePost function, which then returns a filled PostCard react ponent. Any ideas?

  async getSinglePost(id: string) {
    try {
      let url = preHTT + apiURL + port + 'post/id';
      url = url + '?postId=' + id;
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
      });
      const responseJson: any = await response.json();
      // we should do better error handling gracefully
      if (responseJson['status'] === 'ERROR') {
        throw 'Could not retrieve data';
      }
      // console.log(responseJson['payload']);
      return responseJson['payload'];
    } catch (error) {
      console.error(error);
    }
  }

  async renderCard(id: string, type: string) {
    if (type === 'post') { ***here***
        const data = await this.getSinglePost(id);
        return <PostCard data={data} goToProfile={this.moveToProfileScreen}/>;
    } else {
      return <EventCard goToProfile={this.moveToProfileScreen}/>;
    }
}


        ***render/return stuff above***
        {this.state.markers.map((marker:any)  => (
          <Marker // marker on press function eventually
            key={marker['postid']}
            coordinate={marker['location']}
            image={this.emojiDict[marker['type']]}
            >
            <Callout>
              <View flex>
                {this.renderCard(marker['postId'], marker['contentType'])}
              </View>
            </Callout>
          </Marker>
        ***render/return stuff above***

• javascript
• reactjs
• react-native
• asynchronous
• async-await

• 1 render must not be asynchronous, and you shouldn't do http requests from rendering anyway. – Bergi Commented Jul 14, 2018 at 7:38

1 Answer 1

render is synchronous and won't wait for asynchronous routines to be pleted. In this case the ponent should be re-rendered on routine pletion.

It can be done as follows:

  async ponentDidMount() {
    try {
      const asyncData = await this.getAsyncData();
      this.setState({ asyncData });
    } catch (err) {
      // handle errors
    }
  }

  render() {
    if (this.state.asyncData) {
      // render child ponent that depends on async data
    } else {
      // initial render
    }
  }