自动滚动响应redux实现

Question

我正在为我的应用程序实现自动滚动选项。在下面的情况下，通道是从数据库获取的数据列表。我使用redux调用api。如何连接InfiniteScroll和通道列表以获得自动滚动功能？

 import React, { Fragment } from "react";
import { Grid } from "@material-ui/core";
import ChannelCard from "./Card";
import CreateChannel from "./Create";
import SimpleSelect from "./Filter";
import InfiniteScroll from "react-infinite-scroll-component";

const ChannelList = ( {channels: { channels}}) => {
  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);
  };

  //view
  const view = (
    <Fragment>
      <Grid container>
        <Grid item xs={6} sm={6} md={10} lg={10} xl={10}></Grid>
        <Grid>
          <SimpleSelect />
        </Grid>
      </Grid>

        <Fragment>
          <InfiniteScroll
            dataLength={items.length}
            next={fetchMoreData}
            hasMore={true}
            loader={<h4>Loading...</h4>}
          >
            <Grid container>
              {channels.map(channel => (
                <Grid key={channel._id} item xs={6} sm={6} md={3} lg={2} xl={2}>
                  <ChannelCard
                    channel={channel}
                    isAuthenticated={isAuthenticated}
                  />
                </Grid>
              ))}
            </Grid>
          </InfiniteScroll>
        </Fragment>

    </Fragment>
  );

  return <Fragment>{view}</Fragment>;
};

export default ChannelList;

(我使用redux调用api。如何连接InfiniteScroll和通道列表以获得自动滚动功能？)

Answer 1

InfiniteScroll组件要求子组件是希望无限滚动的组件数组，因为您只有一个子组件--即Grid组件--它只为一个项执行它的工作，因此它无法工作：https://www.npmjs.com/package/react-infinite-scroll-component。

只需删除包装网格组件

<InfiniteScroll
    dataLength={items.length}
    next={fetchMoreData}
    hasMore={true}
    loader={<h4>Loading...</h4>}
>
  {channels.map(channel => (
    <Grid key={channel._id} item xs={6} sm={6} md={3} lg={2} xl={2}>
      <ChannelCard
        channel={channel}
        isAuthenticated={isAuthenticated}
      />
    </Grid>
  ))}
</InfiniteScroll>