DataTable: OnLazyLoad repeatedly calling function / infinite loop

[jimjamdev]

If I add the lazy load function <DataTable onLazyLoad={this.onLazyLoad} ....> it repeatedly calls the function causing an infinite loop/timeout.

I don't have to do or click anything. It just keeps on going :)

Here's my example using redux to get the data

/* @flow */
import React, { Component } from 'react';
import PropTypes from 'prop-types';

// Redux
import { connect } from 'react-redux';
import { loadStreamEvents } from 'store/actions/stream/StreamActions';

// prime ui
import { DataTable } from 'primereact/components/datatable/DataTable';
import { Column } from 'primereact/components/column/Column';
import { InputText } from 'primereact/components/inputtext/InputText';

// Ui
import PageTemplate from 'app/components/templates/page.template';
import ReloadCountdown from 'app/components/molecules/ReloadCountdown/ReloadCountdown';
import FullHeight from 'app/components/atoms/FullHeight/FullHeight';
import ButtonIcon from 'app/components/molecules/ButtonIcon/ButtonIcon';
import Loader from 'app/components/atoms/Loader/Loader';


/**
 * Renders the view to display the things.
 */
class TestPrimeDataTable extends Component<Object, Object> {

    static propTypes = {
        loadStreamEvents: PropTypes.func.isRequired,
        isLoading: PropTypes.bool.isRequired,
        list: PropTypes.array,
    };
    loadParams: Object;
    state: Object;
    thisGrid: any;
    onLazyLoad: Function;
    loadData: Function;
    /**
     * @param props the Component's properties
     */
    constructor(props: Object): void {
        super(props);
        this.state = {
            gridVersion: 0,
            params: {
                page: 1,
                pageSize: 10,
                continuousScrolling: false,
                maxCount: 1000,
                orderBy: [],
                where: [],
            }
        };
        this.onLazyLoad = this.onLazyLoad.bind(this);
        this.loadData = this.loadData.bind(this);
    }
    /**
     * Load events when component mounts
     */
    componentDidMount() {
        this.props.loadStreamEvents(this.state.params);
    }

    /**
     * Data load function
     */
    loadData() {
        this.props.loadStreamEvents(this.state.params);
    }

    /**
     * Call function for server side filtering
     * @param event
     */
    onLazyLoad(event) {
        // this.refreshGrid();
        /* In a real application, make a remote request to load data using state metadata from event
         * event.first = First row offset
         * event.rows = Number of rows per page
         * event.sortField = Field name to sort with
         * event.sortOrder = Sort order as number, 1 for asc and -1 for dec
         * filters: FilterMetadata object having field as key and filter value, filter matchMode as value */
        /*setTimeout(() => {
            this.props.loadStreamEvents(this.state.params);
        }, 250); */
        console.log('Event', event);
        const page = this.state.params && this.state.params.page <= 0 ? 1 : (event.first / event.rows) + 1;
        const sortOrder = (event.sortOrder && event.sortOrder === 1);
        const orderBy = [{ field: event.sortField, asc: sortOrder }, event.multiSortMeta]; // TODO: Multiflters
        const where = [];
        this.setState({
            params: {
                page,
                orderBy,
                where
            }
        });
        console.log('StateParams', this.state.params);
       // CALLING ANYTHING HERE CAUSES INFINITE LOOP
        // this.props.loadStreamEvents(this.state.params);
        // this.loadData();
    }
    exportData = () => {
        this.thisGrid.exportCSV();
    };
    /**
     * @override
     */
    render(): Object {
        const { list, isLoading } = this.props;

        const cols = [
            { field: 'id', header: 'ID' },
            { field: 'status', header: 'Status' },
            { field: 'severity', header: 'Severity' },
            { field: 'impact', header: 'Impact' },
            { field: 'data_description', header: 'Description' },
            { field: 'thing_id', header: 'Thing name' },
            { field: 'event_id', header: 'Event ID' },
        ];

        const dynamicColumns = cols.map((col, i) => {
            return <Column key={col.field} field={col.field} header={col.header} filter sortable />;
        });

        const header = <div style={{ textAlign: 'center' }}>
            <InputText type="search" onInput={(e) => this.setState({ globalFilter: e.target.value })} placeholder="Global Search" size="100" />
            <ButtonIcon icon="file-export" onClick={this.exportData} />
            <ReloadCountdown disableCountdown={isLoading} seconds={180} format={'minutes'} action={this.refreshGrid} />
        </div>;

        if (isLoading) { return <Loader absolute />; }

        return (
            <PageTemplate
                title="Events DT"
            >
                <FullHeight>
                    <DataTable
                        style={{ fontSize: '14px' }}
                        ref={(el) => { this.thisGrid = el; }}
                        header={header}
                        value={list}
                        rows={this.state.params.pageSize || 10}
                        totalRecords={this.state.params.maxCount || 1000}
                        // scrollable
                        // scrollHeight="600"
                        lazy
                        onLazyLoad={this.onLazyLoad}
                        sortMode="multiple"
                        paginator
                        responsive
                    >
                        {dynamicColumns}
                    </DataTable>
                </FullHeight>
            </PageTemplate>
        );
    }

}

const mapStateToProps = (state) => {
    return {
        isLoading: state.stream.streams.isLoading,
        list: state.stream.streams.list,
    };
};

const mapDispatchToProps = () => {
    return {
        loadStreamEvents
    };
};

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

[jimjamdev]

Loop caused by moi. if (isLoading) { return ; }

[jimjamdev]

I'm going to close this as I fixed the infinite loop via removing the isLoading from before the grid render. Maybe having the grid with it's own loading state would be helpful.