0

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

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

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);

提前致谢。

4

0 回答 0