如何从Firebase添加数据以响应组件

Question

我正在尝试从后端（firebase）请求一些数据，然后将其置于状态。我认为我的问题是请求完成之前代码正在执行。页面加载后，状态不是null，而是空对象。

更新：fetchAllPost返回一个Promise。快速浏览了promises并使其生效。

fetchAllPost().then((res) =>
      this.setState({
        posts: res,
      })
    );

home.component.jsx

export class home extends Component {
  state = {
    posts: null,
  };
  componentDidMount() {
    const posts = fetchAllPost();
    this.setState({ posts: posts });
    console.log(posts);
  }
  render() {
    return (
    ...

firebase.utils.js

export const fetchAllPost = async () => {
  var postRef = firestore.collection("posts");

  var snapshot = await postRef.get();

  var posts = snapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data(),
  }));
  return posts;
};