Я хочу получить 20 сообщений, прокручивая каждый раз, как я могу это сделать? в моем проекте большие данные, и я использую избыточность для получения данных, могу ли я получать данные шаг за шагом? например, получить 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 } }) ={amp}gt; { useEffect(() ={amp}gt; { getPosts(); }, [getPosts]); return loading ? {amp}lt;Spinner /{amp}gt; : ( {posts.map(post ={amp}gt; ( {amp}lt;PostItem key={post._id} post={post} /{amp}gt; ))} ) } Posts.propTypes = { getPosts: PropTypes.func.isRequired, post: PropTypes.object.isRequired } const mapStateToProps = state ={amp}gt; ({ 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 = () ={amp}gt; async dispatch ={amp}gt; { 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; } } 

Вы можете использовать библиотеку response-infinite-scroller . Я попытался изменить ваш метод Posts , поэтому, возможно, он будет полезен. Но, как уже упоминалось в комментариях, вы должны добавить нумерацию страниц в свой API.

  const Posts = ({ getPosts, post: { posts, loading } }) ={amp}gt; { useEffect(() ={amp}gt; { getPosts(); }, [getPosts]); const itemsPerPage = 20; const [hasMoreItems, sethasMoreItems] = useState(true); const [records, setrecords] = useState(itemsPerPage); const showItems=(posts)={amp}gt; { var items = []; for (var i = 0; i {amp}lt; records; i  ) { items.push( {amp}lt;PostItem key={posts[i]._id} post={posts[i]} /{amp}gt;); } return items; } const loadMore=()={amp}gt; { if (records === posts.length) { sethasMoreItems(false); } else { setTimeout(() ={amp}gt; { setrecords(records   itemsPerPage); }, 2000); } } return {amp}lt;InfiniteScroll loadMore={loadMore} hasMore={hasMoreItems} loader={{amp}lt;div className="loader"{amp}gt; Loading... {amp}lt;/div{amp}gt;} useWindow={false} {amp}gt; {showItems()} {amp}lt;/InfiniteScroll{amp}gt;{" "} } 

Рабочий образец Codesandbox с поддельными данными.