onInfinite trigger twice

I follow the demo to add Infinite Scroll, the console showed ‘fetchMemoCommentsMore’ twice when I scroll to the bottom. Thanks…

import React from 'react';
import {
    Page,
    Navbar,
    NavTitle,
    Link,
    Toolbar,
    Block,
    Tabs, Tab,
    NavRight, Popover, List, ListItem
} from 'framework7-react';

import CourseMemoList from "./memo/courseMemoList";
import InteractiveCard from "./cards/InteractiveCard";
import styled from "styled-components";

import { connect } from 'react-redux'
import { fetchMemoComments, fetchMemoCommentsMore } from '../../../actions/MemoCommentAction'

const MyPage = styled(Page)`
  .tab {
    overflow-y: auto;
  }
`
// 课堂页
class CoursePage extends React.Component {
  state = {
  }
  componentDidMount() {
    
    // document.getElementById('tab-1').addEventListener('scroll', this.handleScroll);
    
    this.onPageAfterIn()
  }
  handleScroll = (e) => {
    // TODO 兼容性
    // https://stackoverflow.com/questions/8480466/how-to-check-if-scrollbar-is-at-the-bottom
    const target = e.currentTarget
    if (target.scrollHeight - target.scrollTop == target.offsetHeight) {
      console.log('Reached the bottom!');
      const { dispatch } = this.props

      // dispatch(fetchMemoCommentsMore())
      
    }
  }
  fetchMemoCommentsMore = () => {
    console.log('fetchMemoCommentsMore');
    if (this.props.isFetching || this.fetching) return;
    this.fetching = true;

    const { dispatch } = this.props

    dispatch(fetchMemoCommentsMore())
    setTimeout(()=>{
      this.fetching = false;
    }, 500)
  }
  onPageAfterIn = () => {
    const { dispatch } = this.props

	  dispatch(fetchMemoComments())
  }
  render() {
    console.log(this.props.isFetching)
    return (<MyPage
        infinite
        infiniteDistance={20}
        infinitePreloader={true}
        onInfinite={this.fetchMemoCommentsMore}
      >
      <Navbar backLink="返回">
        <NavTitle>课堂</NavTitle>
        <NavRight>
          <Link iconIos="f7:menu" iconMd="material:menu" popoverOpen=".popover-menu"></Link>
        </NavRight>
      </Navbar>
      <Toolbar tabbar>
        <Link tabLink="#tab-1" tabLinkActive>话题</Link>
        <Link tabLink="#tab-2">作业</Link>
        <Link tabLink="#tab-3">互动</Link>
      </Toolbar>
      <Tabs swipeable>
        <Tab id="tab-1" tabActive>
            {/* CourseMemoList */}
          <CourseMemoList {...this.props} {...this.state}></CourseMemoList>
        </Tab>
        <Tab id="tab-2" className="page-content">
          <Block>
            {/* CourseHomeWorkList */}
            <p>Tab 2 content</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
            <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
            <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
            <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!</p>
            <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
            <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
            <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
          </Block>
        </Tab>
        <Tab id="tab-3" className="page-content">
            {/* CourseInteractiveList */}
          <InteractiveCard></InteractiveCard>
          <InteractiveCard></InteractiveCard>
          <InteractiveCard></InteractiveCard>
          <InteractiveCard></InteractiveCard>
        </Tab>
      </Tabs>

      <Popover className="popover-menu">
        <List>
          <ListItem link="/dialog/" popoverClose title="Dialog"></ListItem>
          <ListItem link="/tabs/" popoverClose title="Tabs"></ListItem>
          <ListItem link="/panel/" popoverClose title="Side Panels"></ListItem>
          <ListItem link="/list/" popoverClose title="List View"></ListItem>
          <ListItem link="/inputs/" popoverClose title="Form Inputs"></ListItem>
        </List>
      </Popover>
    </MyPage>)
    
  }
};


const mapStateToProps = ({ memoComments, user }) => {
	return {
	  comments: memoComments.comments,
	  memos: memoComments.memos,
	  memoArray: memoComments.memoArray,
	  isFetching: memoComments.isFetching
	}
}

export default connect(
  mapStateToProps
)(CoursePage)

Infinite scroll will be fired with every scroll around bottom position, that is way you already have debouncing if (this.props.isFetching || this.fetching) return; so you shouldn’t worry about it

1 Like