我正在尝试创建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}时,网格工作正常,而且我真的不明白发生了什么。这是我的...
我认为这是“ .size”的问题,因为您没有定义“ .size”属于哪个变量