Javascript 从异步函数呈现本机子级

我试图从一个id呈现一个react本机组件，该id被提供给http请求，然后返回组件可以使用的json。由于http请求是异步的，因此传递到明信片呈现的数据是未定义的。我试图通过等待getSinglePost的返回来解决这个问题，但数据仍然没有定义。 如果不清楚，render函数将调用renderCard函数，该函数将等待来自getSinglePost函数的json，然后返回一个填充的明信片组件。 有什么想法吗

  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***

异步getSinglePost（id:string）{ 试一试{ 让url=preHTT+apiURL+port+'post/id'； url=url+'？postId='+id； const response=等待获取（url{ 方法：“POST”， 标题：{ 接受：'application/json'， “内容类型”：“应用程序/json”， }, }); const responseJson:any=wait response.json（）； //我们应该更好地优雅地处理错误 if（responseJson['status']='ERROR'）{ 抛出“无法检索数据”； } //log（responseJson['payload']）； 返回响应JSON['payload']； }捕获（错误）{ 控制台错误（error）； } } 异步renderCard（id:string，type:string）{ 如果（type=='post'）{***此处*** const data=wait this.getSinglePost（id）； 回来 }否则{ 回来 } } ***渲染/返回上面的内容*** {this.state.markers.map（（marker:any）=>( {this.renderCard（marker['postId']，marker['contentType']）中） ***渲染/返回上面的内容***

---

呈现

是同步的，不会等待异步例程完成。在这种情况下，应在例程完成时重新呈现组件

可按如下方式进行：

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

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

---

render

不能是异步的，并且无论如何都不应该从rendering执行http请求。