Как показать загрузчик, пока статус API находится в состоянии ожидания в React JS

Question

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

this.props.showLoader();
        ajax(config)
            .then((response) => {
                let data;
                this.props.hideLoader();
                data = response.data;
                data[this.props.moduleName.storeVarName + "MediaCost"] = response.data.totalCampaignCost ? response.data.totalCampaignCost : 0;
                this.props.updateCampaignData(data);
            }).catch((error) => {
                this._errorHandler(error);
                this.props.hideLoader();
            });

Answer 1

предоставленной вами информации недостаточно, хотя я делюсь примером показа загрузчика при выполнении http-запроса:

const Loader = () => <div>Loading...</div>;

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
    };
  }

  hideLoader = () => {
    this.setState({ loading: false });
  }

  showLoader = () => {
    this.setState({ loading: true });
  }

  fetchInfo = () => {
    const _this = this;
    this.showLoader();
    ajax(config)
      .then((response) => {
        // do whatever you want with success response
        _this.hideLoader();
      }).catch((error) => {
        // do whatever you want with error response
        _this.hideLoader();
      });
  }

  render() {
    return (
      <div>
        <button onClick={this.fetchInfo} />
        {(this.state.loading) ? <Loader /> : null}
      </div>
    );
  }
}