loadMore function get called infinitely

I use React-Redux to pass loadMore and hasMore

Code:

import * as React from 'react';
import * as InfiniteScroll from 'react-infinite-scroller';
import styled from 'styled-components';
import { Item, SearchInput } from '../models/Search';

interface SearchResultProps {
  input: SearchInput;
  onLoad: (value: SearchInput) => void;
  hasMore: boolean;
  total: number;
  items: Item[];
}

const Container = styled.div`
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
`;

const ItemWrapper = styled.ul`
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
`;

const Item = styled.li`
  margin: 1rem;
`;

const Poster = styled.img`
  width: 10rem;
  height: 14rem;
`;

const SearchResult = ({ items, total, onLoad, input, hasMore }: SearchResultProps) => {
  const loader = (
    <div key={0} style={{ clear: 'both' }}>
      Loading ...
    </div>
  );
  const loadMore = (page: number) => {
    // Need to figure out why infinate loop
    // tslint:disable-next-line:no-console
    console.log(page);
    onLoad({ ...input, page });
  };

  return (
    <Container>
      <InfiniteScroll pageStart={1} loadMore={loadMore} hasMore={hasMore} loader={loader}>
        <div>{`${total} titles`}</div>
        <ItemWrapper>
          {items.map(item => (
            <Item key={item.imdbID}>
              <Poster src={item.Poster} alt={item.Title} />
            </Item>
          ))}
        </ItemWrapper>
      </InfiniteScroll>
    </Container>
  );
};

export default SearchResult;

Here is the example:

Type Black to the Title input and press Search

[OmanFerrer]

The problem is because you are not passing or controlling the property initialLoad correctly. This prop is true by default and every time componentDidUpdate() is executed, the method scrollListener() is executed too.

See code below:

  componentDidUpdate() {
    this.attachScrollListener();
  }

attachScrollListener() {
    .......
    if (this.props.initialLoad) {
      this.scrollListener();
    }
  }

I just passed the property initialLoad={this.state.initialLoad} to InfiniteScroll component and added this.setState({ initialLoad: false }); to loadMore function.

Hope can help you.

[didiself]

So am I.

I use fetch request in loadMore . add await and change the hasMore option. solved.

Hope can help u.