AG-网格服务器端无限滚动访问道具

Question

我正在尝试实现 ag-grid 服务器侧行模型，如他们的文档中所述 这里.我正在尝试做的是将 api 调用及其参数作为 props 传递给网格组件。问题是，当尝试通过 this.props 访问 props 或通过 this.state 访问 state 时，它们都是未定义的。我的代码如下所示：

onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.gridApi.showLoadingOverlay();
      var dataSource = {
        rowCount: null,
        getRows: function(params) {
          setTimeout(function() {
            let serviceParams = this.props.dataServiceParams ?  this.props.dataServiceParams.slice() : {};
            serviceParams.pageSize = this.state.paginationPageSize; // this will be the rows returned per service call
            serviceParams.index =  // if there is more than 1 page for the pagesize this is the index/page to return.
            serviceParams.sortAndFilters = gridUtility.combineSortAndFilters(params.sortModel, params.filterModel);
            this.props.dataService(serviceParams)
                .then(out => {
                  var rowsThisPage = out;
                  var lastRow = -1;
                  params.successCallback(rowsThisPage, lastRow);
                });
            params.context.componentParent.gridApi.hideOverlay();
          }, 500);
        }
      };
      params.api.setDatasource(dataSource);
  };

dataService prop 包含我的服务/API 调用，而 dataServiceParams 包含该服务所需的任何参数。我正在添加其他参数来处理排序、过滤和返回所需的数据页面/索引。我在这里错过了什么？

Answer 1

需要使用 Arrow function 来访问父作用域的属性。检查下面的代码以了解getRows和setTimeout。

  var dataSource = {
    rowCount: null,
    getRows: (params) => {
      setTimeout(() => {
        let serviceParams = this.props.dataServiceParams ?  this.props.dataServiceParams.slice() : {};
        serviceParams.pageSize = this.state.paginationPageSize; // this will be the rows returned per service call
        serviceParams.index =  // if there is more than 1 page for the pagesize this is the index/page to return.
        serviceParams.sortAndFilters = gridUtility.combineSortAndFilters(params.sortModel, params.filterModel);
        this.props.dataService(serviceParams)
            .then(out => {
              var rowsThisPage = out;
              var lastRow = -1;
              params.successCallback(rowsThisPage, lastRow);
            });
        params.context.componentParent.gridApi.hideOverlay();
      }, 500);
    }
  };