Собственная функция sortFable для dataTable

Question

Я получаю сообщение об ошибке при вызове this.props.fetch() в методе mySort. this.props.mySort собирает новые данные из серверной части, отсортированные по соответствующему столбцу. Ошибка: Предупреждение: невозможно обновить во время существующего перехода состояния (например, в render). Методы рендеринга должны быть чистой функцией реквизита и состояния. this.props.fetch теперь вызывается в бесконечном цикле.

Как я могу это исправить?

С наилучшими пожеланиями, Иоахим

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

Вы не должны делать выборку из рендера, и так оно и есть, кажется, он вызывается, когда визуализируется каждый столбец, вызывая многократные обновления состояния, что приводит к бесконечному циклу

Вместо этого переместите выборку в componentDidMount, И всякий раз, когда поле сортировки изменяется, обрабатываете событие изменения, сортируете данные на стороне клиента и сбрасываете свои данные, так что вся таблица уже отсортирована и может быть отображена сразу. Если данные огромны и нуждаются в сервере для их сортировки по тем или иным причинам, снова обработайте повторное получение в событии изменения и установите все отсортированные данные в состояние за один раз.

Что-то вроде,

componentDidMount(){
  // fetch the data
}

handleSortFieldChange(){
  /* sort client side and -> setState()
  or fetch again and setState()*/
}

Answer 2

Я изменил sortFunction таким образом:

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({
               ...
            }))
    }
}

Теперь бесконечного цикла нет, но ошибка остается.