Прокрутка бесконечности - прокрутка к низу ничего не сделала - PullRequest
Новая
       18

Прокрутка бесконечности - прокрутка к низу ничего не сделала

0 голосов
/ 07 мая 2019

Я сделал компонент с массивом из избыточного HOC. Далее я создал бесконечный свиток, используя этот урок: https://upmostly.com/tutorials/build-an-infinite-scroll-component-in-react-using-react-hooks/

Загружает 20 элементов из массива и отображает их. Это отлично работает. Затем он должен отобразить следующие 20 элементов, когда я перейду к нижней части страницы. Это не работает. В Google Devtool я проверил, что функция handleScroll не изменила состояние isFetching.

Это моя третья попытка прокрутки бесконечности. Я пытался сделать это без зацепок, с внешней библиотекой, но каждый раз, когда прокрутка вниз страницы ничего не делает.

Компонент списка Airdrop 

import React, { useEffect, useState } from "react";
import AirdropBlock from "./AirdropBlock/AirdropBlock";
import { Paper } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  paper: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-evenly"
  }
};

const AirdropPanel = props => {
  const { classes, filteredAndSortedAirdrops } = props;
  const [airdropList, setAirdropList] = useState(
    filteredAndSortedAirdrops.slice(0, 20)
  );
  const [isFetching, setIsFetching] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  useEffect(() => {
    if (!isFetching) return;
    fetchMoreAirdrops();
  }, [isFetching]);

  function handleScroll() {
    if (
      window.innerHeight + document.documentElement.scrollTop !==
        document.documentElement.offsetHeight ||
      isFetching
    )
      return;
    setIsFetching(true);
  }

  function fetchMoreAirdrops() {
    setAirdropList(prevState => [
      ...prevState,
      ...filteredAndSortedAirdrops.slice(
        prevState.length,
        prevState.length + 20
      )
    ]);
    setIsFetching(false);
  }

  const airdropBlocks = airdropList.map(e => {
    return (
      <AirdropBlock
        key={e.id}
        title={e.title}
        value={e.value}
        status={e.status}
        logo={e.logo}
        id={e.id}
      />
    );
  });

  return (
    <Paper className={classes.paper} data-testid="airdropPanel">
      {airdropBlocks}
      {isFetching && "Fetching more airdrops..."}
    </Paper>
  );
};

export default withStyles(styles)(AirdropPanel);

HOC, который предоставляет массив для компонента списка Airdrop 

import AirdropPanel from "./AirdropPanel";
import { connect } from "react-redux";
import { onlyNotActiveFiltersNames } from "./helpers/onlyNotActiveFiltersNames";
import { toFilterAirdrops } from "./helpers/toFilterAirdrops";

const mapStateToProps = state => {
  const nonActiveFilters = onlyNotActiveFiltersNames(state.filters);
  const filteredAirdrops = toFilterAirdrops(state.airdrops, nonActiveFilters);
  const filteredAndSortedAirdrops = filteredAirdrops.sort((a, b) => {
    return b.addDate - a.addDate;
  });
  return {
    filteredAndSortedAirdrops
  };
};

const mapDispatchToProps = null;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AirdropPanel);

Я надеюсь найти ошибку или плохую логику в моем коде. Если ему нужно больше кода или объяснения, я сделаю это.

...