时间戳

首页 > 解决方案 > 如何通过无限滚动从redux / react中的api逐步获取数据

javascript - 如何通过无限滚动从redux / react中的api逐步获取数据

问题描述

我想通过每次向下滚动来获得 20 个帖子，我该怎么办？我的项目有大数据，我使用 redux 获取数据，我可以一步一步获取数据吗？例如，第一次获得 20 个帖子，当用户向下滚动时加载接下来的 20 个帖子。我使用 React Hooks 进行开发

我的帖子组件来源是：

import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Spinner from '../layout/Spinner';
import PostItem from './PostItem';
import { getPosts } from '../../actions/post';

const Posts = ({ getPosts, post: { posts, loading } }) => {
    useEffect(() => {
        getPosts();
    }, [getPosts]);


    return loading ? <Spinner /> : (

                {posts.map(post => (
                   <PostItem key={post._id} post={post} />
                ))}

    )
}

Posts.propTypes = {
    getPosts: PropTypes.func.isRequired,
    post: PropTypes.object.isRequired
}

const mapStateToProps = state => ({
    post: state.post
});

export default connect(mapStateToProps, { getPosts })(Posts)

我的操作代码是：

import { setAlert } from './alert';
import {
    GET_POSTS,
    POST_ERROR
} from "../actions/types";

// Get Posts
export const getPosts = () => async dispatch => {
    try {
        const res = await axios.get('/api/ads');

        dispatch({
            type: GET_POSTS,
            payload: res.data
        });
    } catch (err) {
        dispatch({
            type: POST_ERROR,
            payload: { msg: err.response.satusText, status: err.response.satus }
        });
    }
}```

///////////////////////////////
///////////////AND REDUCER IS :

import {
    GET_POSTS,
    POST_ERROR
} from '../actions/types';

const initialState = {
    posts: [],
    loading: true,
    error: {}
};

export default function (state = initialState, action) {
    const { type, payload } = action;

    switch (type) {
        case GET_POSTS:
            return {
                ...state,
                posts: payload,
                loading: false
            }
        case POST_ERROR:
            return {
                ...state,
                error: payload,
                loading: false
            }
        default:
            return state;
    }

}

标签： javascriptreactjsreduxinfinitenginfinitescroll

解决方案

您可以使用react-infinite-scroller库。我试图改变你的Posts方法，所以也许它会很有用。但正如评论中提到的，你应该在你的 API 中添加分页。

   const Posts = ({ getPosts, post: { posts, loading } }) => {
        useEffect(() => {
            getPosts();
        }, [getPosts]);

       const itemsPerPage = 20;
       const [hasMoreItems, sethasMoreItems] = useState(true);
       const [records, setrecords] = useState(itemsPerPage);

     const showItems=(posts)=> {
        var items = [];
        for (var i = 0; i < records; i++) {
          items.push(  <PostItem key={posts[i]._id} post={posts[i]} />);
        }
        return items;
      }

      const loadMore=()=> {
        if (records === posts.length) {
          sethasMoreItems(false);
        } else {
          setTimeout(() => {
            setrecords(records + itemsPerPage);
          }, 2000);
        }
      }



      return  <InfiniteScroll
              loadMore={loadMore}
              hasMore={hasMoreItems}
              loader={<div className="loader"> Loading... </div>}
              useWindow={false}
            >
              {showItems()}
            </InfiniteScroll>{" "}

     }

带有假数据的工作Codesandbox 示例。

推荐阅读