DataTable softFunction infinite loop

UI Components for React
Post Reply
ehmike
Posts: 4
Joined: 05 Apr 2018, 00:58

11 Apr 2018, 00:48

The sortFunction fires now, but if you update your state within the function that gets called it keeps firing over and over.

How I am using this: Whenever anything (sort, filter, page) changes I update a searchParams object in my components state and pass that searchParams off to my action to fetch results from the server. I've tried setting (and not setting) sortField and sortOrder on the actual datatable but either way I get the same results. The column field has the sortable=custom

Code: Select all

					<DataTable
						value={this.state.disciplines}
						paginator={true}
						rows={this.state.searchParams.pageSize}
						totalRecords={this.state.totalCount}
						first={this.state.searchParams.pageNumber}
						onPageChange={this.onPageChange}
						paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink"
						selectionMode="single"
						selection={this.state.selectedRow}
						onSelectionChange={this.showDrawer}
						sortField={this.state.searchParams.sortBy}
						sortOrder={this.state.searchParams.sortDir}
					>
						<Column field="name" header="Name" sortable="custom" sortFunction={this.sortItOut} filter={true} filterElement={nameFilterElement} />
						<Column field="isActive" header="Active" body={this.actionTemplate} style={{ textAlign: 'center', width: '6em' }} filter={true} filterElement={activeFilter}  />

Code: Select all

	sortItOut = (e) => {
		this.setState({ searchParams: { ...this.state.searchParams, sortBy: e.field } }, () => {
			//this.search();
		});
	}

ehmike
Posts: 4
Joined: 05 Apr 2018, 00:58

11 Apr 2018, 16:15

I did a simple test to make sure it wasn't anything else. The same infinite loop happens if you set ANYTHING in your state inside the sortFunction.

Code: Select all

import React from 'react';
import { DataTable } from 'primereact/components/datatable/DataTable';
import { Column } from 'primereact/components/column/Column';

export default class Test extends React.Component {

	constructor(props, context) {
		super(props, context);
		this.state = {
			anything: null,
		};
	}

	sortItOut = (e) => {
		this.setState({ anything: "something" });
	}

	render() {

		const things = [{ name: "Mike" }, { name: "Joe" }, { name: "James" }];

		return (
			<div>
				<div className="identifier-results-list">
					<DataTable value={things} >
						<Column field="name" header="Name" sortable="custom" sortFunction={this.sortItOut} />
					</DataTable>
				</div>
			</div>
		);
	}
}

ehmike
Posts: 4
Joined: 05 Apr 2018, 00:58

11 Apr 2018, 16:28

I would like to use this library but need this operational like ASAP.
Last edited by ehmike on 03 Oct 2018, 17:44, edited 1 time in total.


Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest