如何在 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>
    );
  }
}

如何在 API 状态在 React JS 中显示加载程序

How to show loader while API status is pending in React JS

html

api

loader

reactjs

server