从异步函数渲染反应本地子元素

Question

我试图从一个id呈现一个反应原生组件，它被赋予一个超文本传输协议请求，然后返回组件可以使用的json。由于超文本传输协议请求是异步的，因此传递到PostCard呈现中的数据是未定义的。我试图通过等待getSinglePost的返回来解决这个问题，但是数据仍然没有定义。如果不清楚，渲染函数调用renderCard函数，该函数应该等待getSinglePost函数的json，然后返回一个填充的PostCard反应组件。有什么想法吗？

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

Answer 1

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

可按如下方式进行：

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