загрузка счетчика в React

Question

Класс

  class Loading extends Component<{},{}> {
      state = {
        sample: [],
        loading: false
      };
      sampleService = new SampleService();

     componentDidMount() {
            this.sampleService
              .getAllSample()
              .then((sample) => {
                this.setState((state) => {
                  return Object.assign(state, { sample: sample });
                });
              })
              .catch((err) => {
                console.log(err);
              });
          }
      }

Component.tsx:

render(){
const {loading} = this.state
}
return(
 {loading ? <Spinner/>: <data>
            )}

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

Answer 1

exports class Loading extends Component {
    state = {
        sample: [],
        loading: true
    };

    componentDidMount() {
        this.setState({sample: sample, loading: false});
    }

    render() {
        return (
            <div> 
                {this.state.loading ? 
                    <Spinner /> : <Data />
                }
            </div>
        )
    }
}

Отметьте этот метод.

Answer 2

Вы можете установить состояние loading на true перед отправкой запроса, а затем установить loading на false после возврата ответа (как для успешных, так и для неудачных ответов).

async componentDidMount() {
  this.setState({
    loading: true
  }):

  this.sampleService
    .getAllSample()
    .then((sample) => {
      this.setState({
        sample, 
        loading: false,
      )}; 
     })
     .catch((err) => {
       console.log(err);
       this.setState({
         loading: false,
       )}; 
     });        
}

Answer 3

Вы можете сделать это как функцию async/await и установить loading на true перед вызовом AJAX и установить его как false после получения данных. Вы также можете установить его на false во время сценария ошибки ios

Попробуйте что-то вроде этого

async componentDidMount() {
    this.setState({loading: true});
    try
    {
       const res = await this.sampleService.getAllSample();
       this.setState({sample: res, loading: false);
    }
    catch(err)
    {  
       this.setState({loading:false});
       console.log(err);
    }         
 }