Reactjs 如何将函数设置为在另一个函数之后渲染？

我将我的react应用程序连接到firebase，我认为问题在于页面在从我的数据库获取数据之前加载，我该怎么做才能将功能延迟到它完成数据获取之后

function getPosts(){
    db.collection("Posts").get().then(snapshot =>{
        snapshot.docs.forEach(docs =>{
             createPost(
                 docs.data().postName,
                 docs.data().createdAt,
                 docs.data().postContent,
             )
        })
    })
}

getPosts();

function Blog(){
    return (
    <div>
              <Navbar/>
<div className="container">
<div className="row" id="posts-collection">

</div>
</div>
</div>
    )
}

export default Blog;

函数getPosts（）{ db.collection（“Posts”）.get（）然后（快照=>{ snapshot.docs.forEach（docs=>{ createPost( docs.data（）.postName， docs.data（）.createdAt， docs.data（）.postContent， ) }) }) } getPosts（）； 函数Blog（）{ 返回( ) } 导出默认博客；

---

在呈现jsx之前，需要加载控件。像这样,

import {useEffect, useState} from 'react';

function Blog(){
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    function getPosts(){
      db.collection("Posts").get().then(snapshot =>{
        snapshot.docs.forEach(docs =>{
          createPost(
            docs.data().postName,
            docs.data().createdAt,
            docs.data().postContent,
          )
        })
      setLoading(false);
      })
    }
    getPosts();
  }, [])

  return (
  loading ? 
  <div>
  < Navbar/>
    <div className="container">
      <div className="row" id="posts-collection">

      </div>
    </div>
  </div> : null
  )
}

export default Blog;

从'react'导入{useffect，useState}；
函数Blog（）{
const[loading，setLoading]=useState（true）；
useffect（（）=>{
设置加载（真）；
函数getPosts（）{
db.collection（“Posts”）.get（）然后（快照=>{
snapshot.docs.forEach（docs=>{
createPost(
docs.data（）.postName，
docs.data（）.createdAt，
docs.data（）.postContent，
)
})
设置加载（假）；
})
}
getPosts（）；
}, [])
返回(
加载？

：null
)
}
导出默认博客；

正如MehmetDemiray已经显示的那样，您可以在函数组件中作为效果加载数据，但该答案假设您只希望跟踪加载状态

如果要使用加载的数据显示post数据，则还需要存储返回的数据

const Blog: React.FunctionComponent = () => {
    // state to store data returned by async call. (originally set to null).
    const [posts, setPosts] = React.useState(null);

    // use an effect to load async data.
    // the effect only runs on component load and every time the data in
    // the dependency array changes "[setPosts]" (reference comparison).
    React.useEffect(() => {
        // Create funtion to run async logic to load posts.
        const getPosts = () => {
            // load posts
            db.collection("Posts").get().then(snapshot => {
                // map loaded posts to an array of easy to manage objects.
                const loadedPosts = snapshot.docs.map(docs => {
                    return {
                        name: docs.data().postName,
                        createdAt: docs.data().createdAt,
                        content: docs.data().postContent,
                    }
                });

                // store loaded posts in state.
                setPosts(loadedPosts ?? []);
            });
        };

        // run async function created above.
        getPosts();
    }, [setPosts])

    // posts will remain null until the async function has loaded data.
    // you can manually track loading in a separate state if required.
    if (posts === null) {
        // Show loading view while loading.
        return (
            <div>
                Loading Posts...
            </div>
        );
    }

    // map out posts view after posts have been loaded.
    return (
        <div>
            {posts.map(post => (
                <div>
                    <div>{post.postName}</div>
                    <div>{post.createdAt}</div>
                    <div>{post.content}</div>
                </div>
            ))}
        </div>
    );
};

const Blog:React.FunctionComponent=（）=>{
//存储异步调用返回的数据的状态。（最初设置为null）。
const[posts，setPosts]=React.useState（null）；
//使用效果加载异步数据。
//该效果仅在构件加载时运行，并且每次数据加载时都会运行
//依赖项数组更改“[setPosts]”（引用比较）。
React.useffect（（）=>{
//创建函数以运行异步逻辑来加载帖子。
const getPosts=（）=>{
//负荷柱
db.collection（“Posts”）.get（）然后（快照=>{
//将加载的帖子映射到易于管理的对象数组。
const loadedPosts=snapshot.docs.map（docs=>{
返回{
名称：docs.data（）.postName，
createdAt:docs.data（）.createdAt，
内容：docs.data（）.postContent，
}
});
//在状态中存储加载的帖子。
设置柱（加载柱？？[]）；
});
};
//运行上面创建的异步函数。
getPosts（）；
}，[setPosts]）
//在异步函数加载数据之前，POST将保持null。
//如果需要，您可以在单独的状态下手动跟踪加载。
if（posts==null）{
//加载时显示加载视图。
返回(
装货站。。。
);
}
//加载帖子后映射出帖子视图。
返回(
{posts.map（post=>(
{post.postName}
{post.createdAt}
{post.content}
))}
);
};

组件的设计应能处理所有情况：要么从一个空的帖子数组开始，这样一个

贴图就没有工作可做，要么用不同的组件/渲染来处理“没有帖子”的情况，或者。。。有很多解决办法。并不是说现在根本没有帖子呈现：请尝试发布与问题直接相关的代码，并花时间将其格式化，以便更容易思考：）谢谢，我第一次尝试时它确实有效，但随后我刷新了页面，突然什么都没有加载，我不知道是什么引起了这个问题。编辑：它加载导航栏，然后导航栏很快消失我不知道为什么：(