ReactDataGrid:为什么收到此错误TypeError:undefined不是对象(正在评估“ rows.length”)]]

问题描述 投票:0回答:1

我正在尝试创建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}

任何帮助表示赞赏!请注意,功能rowGetter的console.log从未在控制台中显示,因此网格在此之前消失。

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

我正在尝试创建ReactDataGrid,并且在使用rowGetter时遇到此错误。但是,当我使用rows = {myData}时,网格工作正常,而且我真的不明白发生了什么。这是我的...

javascript reactjs react-data-grid
1个回答
0
投票

我认为这是“ .size”的问题,因为您没有定义“ .size”属于哪个变量

© www.soinside.com 2019 - 2024. All rights reserved.