Дождитесь разрешения Promise для передачи его результата в оператор React return - PullRequest
Новая
       6

Дождитесь разрешения Promise для передачи его результата в оператор React return

0 голосов
/ 20 декабря 2018

У меня есть этот компонент объекта, который я извлекаю из него данные с локального сервера, мне нужно подождать, пока данные будут загружены, а затем передать информацию в оператор 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;

Предмет, который я хочу вернуть, это «предметы», я буду признателен за любую помощь!

1 Ответ

0 голосов
/ 20 декабря 2018

Как правило, все еще новичок в этом, но если я жду ответа для отображения данных или предотвращения загрузки последующих детей, я обычно устанавливаю state в isLoading: true, а затем, когда выборка завершается успешно, я устанавливаю isLoading: false

Как-то так, если это поможет. 

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