0

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

2 回答 2

0

我以这种方式更改了 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({
               ...
            }))
    }
}

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

于 2019-05-17T09:02:44.237 回答
0

您不应该从渲染内部进行提取，而且它的方式似乎是在渲染每一列时调用它，导致多个状态更新导致无限循环

相反，将 fetch 移动到componentDidMount. 并且每当排序字段更改时，处理更改事件并对数据客户端进行排序并重置您的数据，以便整个表已经排序并且可以立即呈现。如果数据很大，无论出于何种原因需要服务器对其进行排序，则再次处理更改事件中的重新获取，并将整个排序的数据一次性设置为状态。

就像是，

componentDidMount(){
  // fetch the data
}

handleSortFieldChange(){
  /* sort client side and -> setState()
  or fetch again and setState()*/
}
于 2019-05-17T07:17:37.327 回答