难以实现 React-Infinite-Scroll-Component

问题描述

我目前正在开发一个社交媒体应用程序，该应用程序使用无限滚动来加载更多帖子。我通过对从我的数据库返回的结果进行分页来做到这一点。每当用户达到某个阈值时，我都希望“下一个”道具调用我的 fetch 函数。这将增加路由中的页码并获取下一组帖子。但是，当我尝试这样做时，它无法正常工作。我不确定是否与所使用的动作或减速器本身有关。我该如何解决这个问题？

组件的JSX：

const posts = useSelector((state) => state.posts);
const totalPages = useSelector(
  (state) => state.totalPages
);

    useEffect(() => {
        setPosts(dispatch);
    },[]);


let page = 0;

const fetchMorePosts = () => {
  page++;
  setPosts(dispatch,page);
};



<PostContainer2>
  <InfiniteScroll
    dataLength={posts.length}
    next={fetchMorePosts}
    hasMore={
      totalPages === posts.length / 2
        ? false
        : true
    }
    loader={
      <Space
        size='middle'
        className='spinner'
      >
        <Spin size='large'></Spin>
      </Space>
    }
    height={300}
    scrollThreshold='100px'
  >
    {posts != null ? (
      posts.map((post,idx) => {
        return (
          <Post
            key={idx}
            postInfo={post}
          ></Post>
        );
      })
    ) : (
      <Space
        size='middle'
        className='spinner'
      >
        <Spin size='large'></Spin>
      </Space>
    )}
  </InfiniteScroll>
 </PostContainer2>

Redux 操作：

import {
    GET_POSTS,GET_PAGES,} from '../../action-types/posts-action-types';

export const setPosts = async (dispatch,pageNum = 0) => {
    try {
        const response = await fetch(
            `http://localhost:4001/user/post?page=${pageNum}&size=2`,{
                method: 'GET',headers: { token: localStorage.token },}
        );

        const parseResponse = await response.json();

        dispatch({
            type: GET_PAGES,payload: parseResponse.totalPages,});

        dispatch({
            type: GET_POSTS,payload: parseResponse.content,});
    } catch (err) {
        console.error(err.message);
    }
};

帖子缩减器：

import { GET_POSTS } from '../../action-types/posts-action-types';

const initialState = [];

const posts = (state = initialState,action) => {
    switch (action.type) {
        case GET_POSTS:
            state = [...state,...action.payload];
            state.sort((a,b) => b.id - a.id);
            return state;

        default:
            return state;
    }
};

export default posts;

总页数缩减器：

import { GET_PAGES } from '../../action-types/posts-action-types';

const initialState = 0;

const totalPages = (state = initialState,action) => {
    switch (action.type) {
        case GET_PAGES:
            state = action.payload;
            return state;

        default:
            return state;
    }
};

export default totalPages;

解决方法

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

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

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