在 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>            )}我应该在哪里将加载变量放在condentDidMount中，以便在数据加载时保持其为真，在数据加载时保持为假

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

您可以将状态设置为在发出请求之前，然后设置为返回响应之后（对于成功和失败的响应）。loadingtrueloadingfalse

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

您可以将其设置为函数，并在 AJAX 调用之前设置为 ，并将其设置为在接收数据后。您还可以将其设置为在错误情况下async/awaitloadingtruefalsefalse

试试这样的东西

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);

    }         

 }