infinite scroll - react-redux

问题

Trying to implement infinite scroll using redux. Below code props video fetching array object from redux store. I used https://www.npmjs.com/package/react-infinite-scroll-component npm.

import React, { Fragment } from "react";
import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";
import Loading from "../../Loading";
import VideoCard from "./Card";
import InfiniteScroll from "react-infinite-scroll-component";



const VideoList = ({ loading, videos }) => {
  //props videos fetching all videos redux store. It is an array object
  const [data, setData] = React.useState({items:Array.from({ length: 20 })})
  const {items} = data
  const fetchMoreData = () => {
    // a fake async api call like which sends
    // 20 more records in 1.5 secs
    setTimeout(() => {
      setData({items:items.concat(Array.from({ length: 20 }))})   
    }, 1500);
  };
  return (
    <div>
      {loading ? (
        <Loading />
      ) : (
        <div className={classes.grow}>
         <InfiniteScroll
          dataLength={items.length}
          next={fetchMoreData}
          hasMore={true}
          loader={<h4>Loading...</h4>}
        >
          <Grid container>

            {videos.map(video => (
              <Grid item xs={12} sm={6} md={4} lg={3} xl={2} key={video._id}>
                <VideoCard
                  loading={loading}
                  image={video.image}
                  title={video.title}
                  id={video._id}
                />
              </Grid>
            ))}
          </Grid>
          </InfiniteScroll>
        </div>
      )}
    </div>
  );
};

export default VideoList;

(Trying to implement infinite scroll using redux. Below code props video fetching array object from redux store)

来源：https://stackoverflow.com/questions/60629773/infinite-scroll-react-redux