onInfiniteLoad never get triggered , why?

[videni]

I create a car list ,following the example this library provided, the onInfiniteLoad is not triggered at all when scrolled to the bottom. by the way I try to debug the source code , I never see javascript syntax like this

  getDisplayIndexStart(windowTop: number): number {
    return Math.floor(windowTop / this.heightData);
  }

define function getDisplayIndexStart arguments windowTop as number and return number , what syntax are you using?

class CarList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
                elements: this.buildElements(0, 20),
                isInfiniteLoading: false
            };
    }
   buildElements(start, end) {
        var elements = [];
        for (var i = start; i < end; i++) {
            elements.push(<ListItem key={i} num={i} />);
        }
        return elements;
    }

    handleInfiniteLoad() {
        this.state.isInfiniteLoading = true;
        setTimeout(function() {
            var elemLength = this.state.elements.length,
                newElements = this.buildElements(elemLength, elemLength + 1000);
            this.state={
                isInfiniteLoading: false,
                elements: this.state.elements.concat(newElements)
            };
        }, 2500);
    }

    elementInfiniteLoad() {
        return <div className="infinite-list-item">Loading...</div>;
    }

    render() {
        return (
            <div>
                <Infinite
                    elementHeight={40}
                    containerHeight={500}
                    infiniteLoadBeginEdgeOffset={200}
                    timeScrollStateLastsForAfterUserScrolls
                    onInfiniteLoad={this.handleInfiniteLoad}
                    loadingSpinnerDelegate={this.elementInfiniteLoad()}
                    isInfiniteLoading={this.state.isInfiniteLoading}
                >
                    {this.state.elements}
                </Infinite>
            </div>
        );
    }
}

export default CarList;

the onInfiniteLoad function is used to load next page when user scroll, its is called at function componentDidUpdate, it implies the next page is just loaded , the state has changed, since onInfiniteLoad is not triggered , where does next page data come from ? also hasLoadedMoreChildren has the same implication. why the onInfiniteLoad function is triggered when data is already loaded?

  const isMissingVisibleRows =
      hasLoadedMoreChildren &&
      !this.hasAllVisibleItems() &&
      !this.state.isInfiniteLoading;
    if (isMissingVisibleRows) {
      this.onInfiniteLoad();
    }
  }
``` #

[videni]

@garetht, this component is not work as expected , even a month later , I still can't figure it out , can you help me debug it?

[videni]

finnally, I know how it works now