等到Promise解决后将其结果传递给React return语句

Question

我在这里有这个对象组件，是从本地服务器上从中获取数据的，我需要等到数据下载后，再将信息传递给组件的return语句。 我尝试了很多事情，但似乎没有用。 这是我的最后尝试：

import React, { Component } from 'react';
import ReviewItem from './review_item.js'

const ReviewList = async (props) => {

  const form = {
       elementPlayground:"2019A.Kagan",
       elementId:props.element_id,
       type:"ShowReviews",
       attributes: { page:0, size:5 }
  }

  const url = `http://localhost:8083/playground/activities/2019A.Kagan/${props.playground}`

  const getItems = () => {
    return fetch(url, {
                method: "POST",
                mode: "cors",
                headers: {
                  "Content-Type": "application/json",
                },
                body: JSON.stringify(form),
              })
              .then(response => response.json())
              .then(json => ((json['attributes'])['reviews']).map(review => <ReviewItem key={json['id']} review={review} />));
  }

    const items = await getItems();
    console.log(items);
    return (
      <ul className="col-md-4 list-group">
      {items}
      </ul>
    )
}

export default ReviewList;

我要退回的商品是“商品”，我们将不胜感激！

Answer 1

对此通常仍然很isLoading: true ，但是如果我正在等待显示数据的响应或阻止进一步的子项加载，我通常将state设置为isLoading: true ，然后在成功完成获取时将isLoading: false设置isLoading: false

如果有帮助，就可以这样。

return (
  <ul className="col-md-4 list-group">
  {!this.state.isLoading && {items}}
  </ul>
)