Реагировать на колесо активности в ожидании вызова API для возврата данных

Question

Просто пытаюсь вернуть некоторые данные из Magi c Gathering API (кстати, очень веселая игра). API немного медленно возвращает данные, когда я пытаюсь позвонить, чтобы получить несколько карточек путем их поиска.

У меня есть реагирующий bootstrap модал, который появляется всякий раз, когда я ищу термин. Я хотел бы вставить в нее счетчик, пока я жду, чтобы вернуть карты, а затем убрать его, как только появятся некоторые карты.

Я думал, что смогу просто отобразить счетчик, пока массив моих карт было пустым или неопределенным, но поскольку есть ожидающее обещание, представляющее значение, которое, я думаю, не сработает?

Может кто-нибудь помочь мне с лучшим способом сделать это?

state = {
  modal: false,
  form: "",
  result: []
};

// function to get cards from the api and update the state

cardsLoaded = () => {
  if (this.state.result === [] || this.state.result === undefined) {
    return (
      <Spinner animation="border" role="status">
        <span className="sr-only">Loading...</span>
      </Spinner>
    );
  } else {
    return (
      <div style={{ display: "block", width: "10em" }}>
        {this.state.result.map((card, section, index, add) => {
          return (
            <div key={section} style={{ display: "inline" }}>
              <button key={index}>{card}</button>
              <button key={add} onClick={() => this.props.addToDeck(card)}>
                <GiCardPlay />
              </button>
            </div>
          );
        })}
      </div>
    );
  }
};

вот мой модал, где я рендерирую счетчик:

<Modal
  show={this.state.modal}
  onExit={() => console.log("modal closed")}
  size="lg"
  aria-labelledby="contained-modal-title-vcenter"
  centered
>
  <Modal.Header closeButton>
    <Modal.Title id="contained-modal-title-vcenter">Modal heading</Modal.Title>
  </Modal.Header>

  <Modal.Body>{() => this.cardsLoaded()}</Modal.Body>
  <Modal.Footer>
    <Button onClick={this.closeModal}>Close</Button>
  </Modal.Footer>
</Modal>;

Answer 1

Возможно ли установить флаг «загрузки» при вызове API, а затем сбросить его при разрешении вызова API?

// set loading flag to true while fetching from API
this.setState({ loading: true });

// fetch from api, set flag to false once the api call resolves 
// (whether it's successful or not)
fetch('http://apiuri.com/')
  .then(res => {
    // handle response here...
    this.setState({ loading: false });
  })
  .catch(err => {
    // handle error here...
    this.setState({ loading: false });
  })

Тогда где вы отображаете свой Spinner, вы можете сделать это условно с флагом loading.

this.state.loading && (
  <Spinner animation="border" role="status">
    <span className="sr-only">Loading...</span>
  </Spinner>
)

Возможно, вам придется перетасовать некоторые состояния / подпорки в зависимости от иерархии вашего компонента