Автоматическая прокрутка реагирует на избыточную реализацию

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;

(Я использовал приставку для вызова API. Как я могу подключить InfiniteScroll и список каналов, чтобы получить функцию автопрокрутки?)

Answer 1

Компонент

InfiniteScroll требует, чтобы дочерние элементы были массивом компонентов, для которых вы хотите иметь бесконечную прокрутку, поскольку у вас есть только один дочерний элемент, который является компонентом Grid, он выполняет свою работу только для одного элемента, следовательно, его нет. рабочая: https://www.npmjs.com/package/react-infinite-scroll-component

просто удалите компонент Grid обертывания

<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>