dataTable with own sort function

[JLudwig]

I'm using dataTable in the following way:

Code: Select all

constructor(props) {
        super(props);
        let columns = [
            { field: "foo", header: "bar", sortable: true, sortFunction: this.mySort }
        ]
        this.state = {
            cols: columns
        }
        this.colOptions = [];
        for (let col of this.state.cols) {
            this.colOptions.push({ label: ` ${col.header}`, value: col });
        })
}


mySort = (e) => {
        if (e.order === 1) {
            console.log("1")
            this.props.fetch({...)}
            } else {...}
          }
       
       
render() {

let columnData = this.state.cols.map((col, i) => {
            return <Column className="columnheader" style={col.style} key={col.field} field={col.field}
                header={col.header} sortable={col.sortable} sortFunction={col.sortFunction} body={col.body} expander={col.expander} />
        });

return(
<DataTable>
value={fetchResults}
{columnData}
</DataTable>
)
}

I get an error when calling this.props.fetch() in the mySort method. this.props.mySort collects new data from the backend sorted by the respective column. The error is: Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
this.props.fetch is now called in an infinite loop.

How can I fix this?

Best regards,
Joachim

[mert.sincan]

Hi,

Please use componentDidMount() lifecycle method to fetch the data. Please examine https://www.robinwieruch.de/react-fetching-data/

Best Regards,