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

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，因此它只返回loading ti will，因为如果它呈现为未填充，则会出错。

此当前代码不起作用。它仍然在未完全提取数据的情况下进行渲染。如何确保isFetching只有在提取完所有数据后才会变为false。(我有两个提取功能(

Answer 1

使用async/await获取

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
}