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

【问题标题】：How can I get step by step data from api in redux/react by infinite scroll如何通过无限滚动从redux / react中的api逐步获取数据
【发布时间】：2019-12-24 09:36:08
【问题描述】：

我想通过每次向下滚动来获得 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;
    }

}

【问题讨论】：

请详细说明问题的哪一部分是困难的？找到加载数据的时机？
后端const res = await axios.get('/api/ads');目前是返回完整的大数据还是只返回20个数据
@UyiosaEnabulele 我的 api 返回大数据
@DmitryReutov 无限滚动只是我想每次显示20个帖子，我不知道api是否也应该改变？目前我从 api 收到所有数据
取决于您要达到的目标。如果您尝试减少每个请求的 api 数据大小，我认为您需要更改 API 以返回分页数据，例如像这样 {content: [], page: 1, totalPages: 10} 那么您可能想要使用 lib喜欢github.com/civiccc/react-waypoint

标签： javascript reactjs redux infinite nginfinitescroll

【解决方案1】：

您可以使用react-infinite-scroller 库。我已尝试更改您的 Posts 方法，所以它可能会很有用。但正如 cmets 中所述，您应该在 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 sample 处理虚假数据。

【讨论】：