我已经为我的报纸实现了无限滚动挂钩

  const [posts, setPosts] = useState([]);
  const [currentOffset, setCurrentOffset] = useState(0);

  const [isLoading, setLoading] = useState(true);
  const [isFetching, setIsFetching] = useState(false);

  let loadThreePosts = () => {
    axios.get(`/news?limit=3&offset=${currentOffset}`).then(({ data }) => {
      let threePosts = [];
      console.log(data);
      data.data.forEach((p) => threePosts.push(p));
      setPosts((posts) => [...posts, ...threePosts]);
      setLoading(false);
    });
    setCurrentOffset(currentOffset + 3);
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  useEffect(() => {
    if (!isFetching) return;
    fetchMorePosts();
  }, [isFetching]);

  function handleScroll() {
    if (
      window.innerHeight + document.documentElement.scrollTop !==
        document.documentElement.offsetHeight ||
      isFetching
    )
      return;
    setIsFetching(true);
  }

  function fetchMorePosts() {
    setTimeout(() => {
      loadThreePosts();
      setIsFetching(false);
    }, 2000);
  }

因此,如果我go 报纸上,在我的网站上投放链接,它会根据我的需要获取帖子, 但如果我将新闻链接粘贴到浏览器地址栏中,它不会获取任何内容

推荐答案

将您的代码更改为:

useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    handleScroll(); // Call handleScroll function
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

Reactjs相关问答推荐

阻止在ShadCN和React中的FormLabel中添加 colored颜色

为什么这个'Suspense'子组件在挂起promise解决后会丢失它的状态,而不是呈现?<>

有没有方法覆盖NextJS 14中的布局?

如何避免react 使用ESLINTreact 挂钩/穷举-deps进行第一次呈现

Reaction中的数据加载不一致

子路径上未定义useMatches句柄

使用Ionic 7和React 18,如何访问历史对象以在页面之间导航?

StrictMode+SetInterval=双重渲染(即使使用useEffect清理)

我如何使用 React toastify (Promise) toast 和邮箱 js

React useContext 的未定义返回值

我可以在加载器函数中多次 fetch() 并使用一次 useloaderdata() 提取它吗?

无法通过react 路由中的链接传递信息

如何让 useEffect 在 React.JS 中只运行一次?

React - 使用 React 显示错误和积极alert

如何在 React Native 中更新跨屏幕呈现的上下文状态变量?

如何从 graphql/apollo 中的缓存中清除多个查询

有没有办法根据 Rechart 中的 activeDot 更改值?

React Native map 中的初始zoom 级别

React - 仅在变量为真时显示项目

您无权使用阻止 webRequest 侦听器.请务必在 list 中声明 webRequestBlocking 权限