如何在 Post 请求中使用 getStaticProps 或 getserversideProps？

问题描述

我正在使用 Post 请求从后端获取数据。我正在使用 getinitialProps 来呈现数据，但是当我知道不再推荐 getinitialProps 时。我想用 vercel 推荐的方法之一替换 getinitialProps 。我成功地将 getStaticprops 用于所有获取请求。但仍有一些帖子请求，例如显示相关博客和显示带有标签和类别的博客。

blow 代码用于从后端获取数据：

listAllBlogsWithTagsAndCategories：

 export const listBlogsWithCategoriesAndTags =async (skip,limit) => {
        const data = {
            limit,skip
        };
        return await fetch(`${API}/blogs-categories-tags`,{
            method: 'POST',headers: {
                Accept: 'application/json','Content-Type': 'application/json'
            },body: JSON.stringify(data)
        })
            .then(response => {
                return response.json();
            })
            .catch(err => console.log(err));
    };

页面

const Blogs = ({ blogs,categories,tags,blogsLimit,blogSkip,router }) => {    

    const [limit,setLimit] = useState(blogsLimit);
    const [skip,setSkip] = useState(0);
    const [size,setSize] = useState(totalBlogs);
    const [loadedBlogs,setLoadedBlogs] = useState([]);

    const loadMore = () => {
        let toSkip = skip + limit;
        listBlogsWithCategoriesAndTags(toSkip,limit).then(data => {
            if (data.error) {
                console.log(data.error);
            } else {
                setLoadedBlogs([...loadedBlogs,...data.blogs]);
                setSize(data.size);
                setSkip(toSkip);
            }
        });
    };
    const loadMoreButton = () => {
        return (
            size > 0 &&
            size >= limit && (
                <button style={{width:'100%',textAlign:'center'}} onClick={loadMore} className="btn nbtn btn-danger ">
                    Load more
                </button>
            )
        );
    };

    const showAllBlogs = () => {
        return blogs.map((blog,i) => {
            // ()
            return (
                <article key={i} className="blog bg-light ">
                 <Card blog={blog}/>
               </article>
            );
        });
    };
    const showLoadedBlogs = () => {
        return loadedBlogs.map((blog,i) => (
            <article key={i} className="blog bg-light ">
                <Card blog={blog} />
            </article>
        ));
    };
  
    return (
       <>
       {head()}
  <div>
     <section className="container ">
          <h1 className="large text-primary">All Educational Blogs</h1>
          <p className="extra-small text-light-gray">KNowledge is everything,gain it and share it.</p>
          <div className="line"></div>
          <Link href="/search"><a className="btn nbtn btn-dark m-1">Click here to Search blog</a></Link>

         <div>
         {showAllBlogs()}
         </div>
         <div>
            {showLoadedBlogs()}
        </div>
        <div>
            {loadMoreButton()}
        </div>
    </section>
 </div>
  </>  
    );
};

Blogs.getinitialProps = () => {
    let skip = 0;
    let limit = 10;
    return listBlogsWithCategoriesAndTags(skip,limit).then(data => {
        if (data.error) {
            console.log(data.error);
        } else {
            return {
                blogs: data.blogs,categories: data.categories,tags: data.tags,totalBlogs: data.size,blogsLimit: limit,blogSkip: skip
            };
        }
    });
}

export default withRouter(Blogs);

提前致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）