javascript - AgGridReact 不会在数据更改时重新渲染

Question

我将 rowData 和 columnDefs 作为 Prop 传递。网格正在正确加载。但是，当数据发生变化时，Grid 不会重新渲染。它来到父组件的渲染，并传递给 AgGridReact。但是，仍然没有重新渲染。

由于它是一个完整的 react 应用程序，我在 https://github.com/jintoppy/ag-grid-upgrade 中添加了代码

主要代码如下。

<AgGridReact
        // properties
         columnDefs={this.state.columnDefs}
         rowData={this.props.data}

         // events
         onGridReady={this.onGridReady}>
</AgGridReact>

Answer 1

不确定您是否对此有解决方案。我有一个解决方案。

即使我在将 rosData 通过 props 传递给 AgGridReact 之前也遇到过这个问题，然后我尝试使用 setRowData(rows) API 函数更新行。

一旦你的网格准备好了，你的 gridOptions 也会有 api，这样你就可以通过调用 gridOptions.api 来访问 Ag-grid API，或者你可以在你的 onGridReady 方法中创建 this.api，如下所示。

onGridReady( params ) {
    const rowData = this.props.rows;

    this.api = params.api;

    if ( rowData.length > 0 && this.api ) {
      this.api.setRowData( rowData );
    }
}

你需要在你的 componentWillReceiveProps 中调用同样的东西

componentWillReceiveProps( nextProps ) {
    if ( !isEqual( this.props.rows, nextProps.rows ) && this.api ) {
        this.api.setRowData( nextProps.rows );
    }
}

然后你可以从组件中删除 rowData Prop

<AgGridReact
    // properties
    columnDefs={this.state.columnDefs}

     // events
     onGridReady={this.onGridReady}>
</AgGridReact>

希望这可以帮助 ...