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

 }

使用多个提取请求在渲染之前进行提取

1 个答案: