ReactJs 固定数据表：data.getObjectAt 不是函数

Question

我正在尝试使用 Facebook 的 fixed-data-table 构建一个 JSON 可配置数据表。我的第一个代码是：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { Icon } from 'semantic-ui-react';

import { Table, Column, Cell } from 'fixed-data-table';

const DateCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col].toLocaleString()}
  </Cell>
);

const LinkCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    <a href="#">{data.getObjectAt(rowIndex)[col]}</a>
  </Cell>
);

const TextCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col]}
  </Cell>
);

const NumericCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col]}
  </Cell>
);

const BooleanCell = ({rowIndex, data, col, ...props}) => (
  
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col] ? <Icon name='checkmark' color='green' /> : <Icon name='remove' color='red' />}
  </Cell>
);


class DataTable extends Component {
    state = {
      schema: this.props.schema,
      data: this.props.data,
    }

  getCells = (schema, data) => {

        let columns = [];

        schema.columns.map((column, index) => {

            let cell = (<TextCell></TextCell>);
            let key = column.field + index;

            if (column.type === 'string') {

              cell = (<TextCell 
                          data={this.state.data} 
                          col={column.field}
                        />);
            }

            if (column.type === 'integer') {

              cell = (<NumericCell 
                          data={this.state.data} 
                          col={column.field}
                        />);
            }


            if (column.type === 'boolean') {

              cell = (<BooleanCell 
                          data={this.state.data} 
                          col={column.field}
                        />);
            }


            let col = (<Column 
                          header={column.title}
                          cell={cell}
                          width={100}
                       />);

            columns.push(col);

            return;
          });

      return columns;
    }




  render() {

    let schema = {
      "columns": [
          {
            "title": "Name",
            "field": "name",
            "type": "string",
          },
          {
            "title": "EIN",
            "field": "ein",
            "type": "string",
          },
          {
            "title": "Active",
            "field": "isactive",
            "type": "boolean",
          }
        ],
        "edit": true,
        "delete": true,
        "sort": true
    };

    let data = [
    {
      name: 'Test1',
      ein: '1234',
      isactive: true
    },
    {
      name: 'Test2',
      ein: '123',
      isactive: true
    },
    {
      name: 'Test3',
      ein: '12345',
      isactive: true
    },
    ];

    let columns = this.getCells(schema, data);


    return (
      <Table
        rowHeight={50}
        schemaHeight={50}
        maxHeight={100}
        width={1000}
        height={500}
        rowsCount={data.length}
        {...this.props}>

        {columns}

      </Table>
    );
  }
}

export default DataTable;

运行时出现以下错误：

TypeError: data.getObjectAt is not a function
TextCell
D:\\WORKSPACE\test\src\components\shared\DataTable.js:42
  39 | 
  40 | const TextCell = ({rowIndex, data, col, ...props}) => (
  41 |   <Cell {...props}>
**> 42 |     {data.getObjectAt(rowIndex)[col]}**
  43 |   </Cell>
  44 | );
  45 | 

我尝试了不同的 JSON 结构，但没有成功。相应地加载数据和架构。

Answer 1

这确实需要一些时间来初步理解。

我将使用“fixed-data-table-2”中的代码来描述它。

在表格中使用的数据列表被包装在一个对象中 由数据列表和数据列表过滤器数组组成。 您的列表数据仅在您将其包装为 DataListWrapper 对象以及一个过滤器数组，其中每个 过滤器数组的条目是一个布尔值，指定相应的 列表行将可见（true）或隐藏（false）。

请参见 BuildObjectDataListStore 类。 那里有一个方法“getObjectAt”，当被调用时，它会根据输入变量名称检索列表行列。 例如

var {my_id} = list.getObjectAt(44);

表示如果索引 44 处的列表行包含名为“my_id”的列 那么该列的值将最终出现在您的 my_id 变量中。 这仅适用于“下划线”作为列名中的分隔符， 因此任何由“my-id”等列组成的列表都必须转换为 在“fixed-data-table”中使用之前的“my_id”。 BuildObjectDataListStore 中有一个简洁的转换表过程。

下面是如何将一个普通列表数组“myList”包装到一个对象中 固定数据表'可以渲染：

this.dataList = new BuildObjectDataListStore(myList);

然后这个对象和一个过滤器数组一起被包装成一个对象：

this.filteredDataList = new DataListWrapper(this.filter, this.dataList);

你有它； DataListWrapper 是“固定数据表”可以呈现的公认列表格式。

现在人们使用“fixed-data-table-2” 得到 Schrödinger, Inc. 的持续支持。 较早的“fixed-data-table”作为公共组件被废弃。

从固定数据表的基础发展而来，固定数据表2的力量至少是双重的；

• 可以处理数千行列表数据而不会陷入困境 滚动和其他响应。
• 单元格渲染器的原理是指任何行列都可以渲染任何东西 HTML5 提供的（文本、图像、视频等）。

因此，对于某些应用程序，此列表组件可能会出现。缺点可能是上述包装原理和列渲染器方法的初始学习曲线。