Question

我有从API检索的大量数据。

为此，我增加了一个承诺。由于API需要太多时间来获取数据，因此我试图显示加载程序。这是我的样品

import React from 'react';
import {Button} from 'react-bootstrap';
import ApplicationService from '../services/applicationServices';
import renderIf from 'render-if';
import OverlayLoader from '../../common/components/overlayLoader';

class SampleComponent extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      isLoader : false
    };
  };

  onTapNext = () => {
    this.setState({isLoader: true});
    ApplicationService.getPersonalDetails(AppService.personaDetails).then(function(resp) {
        // Code for fetching data and do some sorting
        // hide loader once get the result 
        this.setState({isLoader: false});
    }, function(error) {
      this.setState({isLoader: false});
    });
  }

  render() {
    var _component = "";
        if(this.state.isLoader){
             _component = <OverlayLoader></OverlayLoader>;
        } else {
            _component = <Button className="footerButtons" onClick={this.onTapNext}>FETCH DATA</Button>;
        }
    return (
        <div> {_component}</div>    
    )
    }
}

export default SampleComponent;

但是当诺言被调用时，我看不到装载机。我正在使用 OverlayLoader 组件显示加载程序。

谁能让我知道我在这里想念的东西。

谢谢

Answer 1

我认为状态没有改变，请为onTapNext方法尝试此代码

let encoding = phoneNumberString.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed)

}

Answer 2

您首先设置状态，然后调用api。在代码中，两者都是同时执行，以便加载程序不会填充，请首先设置加载程序状态，然后在setState的回调中调用api。您可以参考下面的代码

onTapNext = () => {
    this.setState({isLoader: true}, this.onCallback());
}

onCallback = () => {

    const self = this;
        ApplicationService.getPersonalDetails(AppService.personaDetails).then(function(resp) {
        // Code for fetching data and do some sorting
        // hide loader once get the result 
        self.setState({isLoader: false});
    }, function(error) {
    self.setState({isLoader: false});
    });

}

Answer 3

尝试类似的操作，加载程序将直接显示，只有在最后一次解决您的诺言后，加载程序才会消失

   this.state = {
      isLoader : true
    };


onTapNext = () => {
    this.setState({isLoader: true});
    ApplicationService.getPersonalDetails(AppService.personaDetails).then( resp => {
        // Code for fetching data and do some sorting
        // hide loader once get the result 

    }).then(
      this.setState({isLoader: false});
    );
  }

除非您确实需要onClick，否则应该在componentDidMount（）函数（我的调用）中进行API调用

componentDidMount() {
    this.setState({
        loading: true
    })
    fetch('/api/data')
        .then(res => {
            return res.json()
        })
        .then(datas =>
            this.setState(
                {datas, loading: false}
            )
        ).catch(err => this.setState({
            APIerror: true,
            APIerrorMessage: err
        }))
}

在setState渲染未调用之后

3 个答案: