使用多个获取请求在渲染之前获取

Question

import React from "react";

class Admin extends React.Component {
  state = {
    isFetching: true


  }

  componentDidMount = () => {

    this.getProfile()
    this.getPost()
    this.setState({isFetching: false})




  }

 getProfile = () => {
     fetch(url)
     .then (fetch stuff)

 }


 getPost = () => {
     fetch(url)
     .then (fetch stuff)

 }


  render() {

    if (this.state.isFetching) {
      return <div>Loading...</div>
    } else {
      return (

        <div>



        </div>

      );
    }
  }
}

export default Admin;

目标基本上是我想获取我的所有数据然后渲染。我将 isFetching 状态设置为 true，因此它只返回加载时间，因为如果它呈现未获取，它会出错。

此当前代码不起作用。它仍然呈现未完全获取的未完全数据。如何确保 isFetching 仅在获取每个数据后才变为 false。 （我有 2 个获取函数）

Answer 1

使用异步/等待获取

 getProfile = async () => {
     const profile = await fetch(url)
     return profile //or whatever you need to do with it

 }

 getPost = async () => {
     const post = await fetch(url)
     return profile //or whatever you need to do with it

 }