Question

在mySort方法中调用this.props.fetch（）时出现错误。 this.props.mySort从后端收集新数据，这些数据按各自的列排序。错误是：警告：在现有状态转换期间（例如，在render中无法更新）。渲染方法应该纯粹是props和state的函数。现在，在无限循环中调用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。并且，无论何时更改排序字段，都应处理change事件并对数据客户端进行排序并重置数据，以便整个表都已排序并且可以立即呈现。如果数据巨大，并且出于任何原因需要服务器对其进行排序，请再次处理change事件中的refetch，并一次性将整个排序后的数据设置为状态。

类似

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

现在，没有无限循环，但是错误保持不变。

自己的dataTable的sortFunction

2 个答案: