own sortFunction for dataTable - reactjs

Question

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
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>
)
}

Answer 1

You shouldn't be doing a fetch from inside a render, and the way it is, seems it's being called when every single column is rendered causing multiple state updates resulting in an infinite loop
Instead, move the fetch to componentDidMount. And whenever the sort field is changed, handle the change event and sort the data client side and reset your data, so that the whole table is already sorted and can be rendered at once. If the data is huge and needs the server to sort it for whatever reasons, again handle the refetch in the change event, and set the entire sorted data into state at one go.
Something like,
componentDidMount(){
// fetch the data
}
handleSortFieldChange(){
/* sort client side and -> setState()
or fetch again and setState()*/
}

Answer 2

I changed the sortFunction this way:
mySort = (e) => {
if (e.order === 1 && e.field !== this.state.sortField) {
this.setState({
sortField: e.field
},
this.props.fetchSearchResults({
...
}))
} else if (e.order === -1 && e.field !== this.state.sortField) {
this.setState({
sortField: e.field
},
this.props.fetchSearchResults({
...
}))
}
}
Now, there is no infinite loop but the error stays the same.