ReactDataGrid：为什么我收到此错误类型错误：未定义不是 object（评估“rows.length”）

Question

我正在尝试创建一个 ReactDataGrid，但在使用 rowGetter 时出现此错误。 但是，当我使用 rows={myData} 时，网格工作正常，我真的不明白发生了什么。

这是我的代码：

import React, {Component, useState } from 'react';
import DataGrid from 'react-data-grid';
import 'react-data-grid/dist/react-data-grid.css';
import { Toolbar, Data, Filters } from "react-data-grid-addons";

const {
  NumericFilter
} = Filters;

const selectors = Data.Selectors;



class YvideoList extends Component {

    constructor(props, context){
            super (props, context);

            const selectors = Data.Selectors;

            const defaultColumnProperties = {
                    filterable: true,
                    // width: 160
            };


            this.colums =  [
                    { key: 'title', name: 'Title' }, 
                    { key: 'views', name: 'Views', filterRenderer: NumericFilter }, 
                    { key: 'date', name: 'Date' }]
            .map(c => ({ ...c, ...defaultColumnProperties }));                
    }


    rowGetter = (index) => {
            console.log("INDEX: ", index);
    return selectors.getRows(this.props.videos[0].results)[index];
    };

    rowsCount = () => {
    return selectors.getRows(this.props.videos[0].results).length;
};


    render() {
            return (
                    <DataGrid
                    columns={this.colums}
                    rowGetter={this.rowGetter} // -> GRID CRASHES
                    rowsCount={2}
                    //rows={this.props.videos[0].results} // -> THIS WORKS
                    />
            )
    }


}
export default YvideoList;

我得到的错误如下：

TypeError: undefined is not an object (evaluating 'rows.length')
DataGrid
src/DataGrid.tsx:268
  265 | lastFrozenColumnIndex={columnMetrics.lastFrozenColumnIndex}
  266 | draggableHeaderCell={props.draggableHeaderCell}
  267 | onHeaderDrop={props.onHeaderDrop}
> 268 | allRowsSelected={selectedRows?.size === rows.length}
      | ^  269 | onSelectedRowsChange={onSelectedRowsChange}
  270 | sortColumn={props.sortColumn}
  271 | sortDirection={props.sortDirection}

任何帮助表示赞赏。 请注意控制台，来自 function rowGetter 的日志永远不会显示在控制台中。 所以网格在那之前就死了。

EDIT1：我认为问题在于我使用的数据网格版本。 在版本 5.0.4 中，我添加的代码看起来可以工作，但在版本 7 上不行。不幸的是，我找不到版本 7-canary 的过滤/排序示例

Answer 1

所以我找到了原因，这是由 react-data-grid 的版本更改引起的，他们删除了 rowgetters，所以我用错了，他们网站上的文档不是最新的，很遗憾，因为网格看起来真的很好。

对于实际演示，您可以在此处查看： https://github.com/adazzle/react-data-grid/tree/canary/stories/demos