javascript 尝试使用UseEffect在用户到达底部时获取新帖子,但问题是应用程序显示数据库中的所有帖子

jk9hmnmh  于 2023-02-02  发布在  Java
关注(0)|答案(1)|浏览(116)

我尝试在react中使用UseEffect
用于当用户到达底部时获取新帖子。
但问题是应用程序显示数据库中的所有帖子!无论我做什么,
我不知道哪里是问题,为什么它获取所有职位,而不是5或6 .当用户到达底部显示更多
但是我的代码失败了如果可能的话有人能看看我的代码吗
对不起,英语不好,如果有人想编辑我的职位,这是确定的
这是我的postlist.js文件
我写了使用效果,但它获取所有职位,而不是只有5或6或...

import { nanoid } from "@reduxjs/toolkit";
import tw from "twin.macro";
import Advertise from "../../pages/PostPage/components/Advertise";
import Placeholder from "../Placeholder";
import Post from "./components/Post";
import rehypeVideo from "rehype-video";
import { useState, useEffect } from "react";

const [post, setpost] = useState(null);
useEffect(() => {
  window.addEventListener("scroll", handleScroll);
  return () => window.removeEventListener("scroll", handleScroll);
}, [post]);

const fetchagain = () => {
  if (post != null)
    fetch(post)
      .then((res) => res.json())
      .then((result) => setpost([...posts, ...result]));
};

const handleScroll = () => {
  const html = document.documentElement;
  const body = document.body;
  const windowheight =
    "innerHeight" in window ? window.innerHeight : html.offsetHeight;
  const docHeight = Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight
  );
  const windowBottom = windowheight + window.pageYOffset;
  if (windowBottom >= docHeight) {
    console.log("we reached the bottom");
    fetchagain();
  }
};

window.EventBus.emit("reset-ads");
const PostsList = ({
  posts,
  filteredTag,
  toInvalidate,
  enableImages = true,
}) => {
  return (
    <Wrapper>
      {posts?.length > 0 ? (
        posts.map((post, i) => (
          <>
            <>
              <Post
                post={post}
                isFirstPost={enableImages && i === 0}
                filteredTag={filteredTag}
                key={nanoid()}
                toInvalidate={toInvalidate}
              />
              <Advertise />
            </>
            <div id="pos-article-display-78271"></div>
          </>
        ))
      ) : (
        <Placeholder />
      )}
    </Wrapper>
  );
};

const Wrapper = tw.div`w-full`;

export default PostsList;
ulmd4ohb

ulmd4ohb1#

您正在尝试实现一个无限加载程序。
尝试使用StickySectionHeader作为路径点。添加StickySectionHeader作为帖子列表中的最后一个元素,并在callBack函数中获取新帖子。它的性能也更好。

<Wrapper>
    {
       post.map(...) {...}
    }
    <StickySectionHeader stick={false} callBack={()=>{/*fetch new posts here*/}} />
</Wrapper>

相关问题