javascript - 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 对象以及一个过滤器数组，其中每个过滤器数组的条目是一个 bool 值，指定是否对应列表行将可见(true)或隐藏(false)。

请参阅类 BuildObjectDataListStore。其中有一个方法“getObjectAt”，调用该方法时会根据输入变量名称检索列表行列。例如

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

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

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

this.dataList = new BuildObjectDataListStore(myList);

然后这个对象与过滤器数组一起包装成一个对象:

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

现在你已经得到它了； DataListWrapper 是“固定数据表”可以呈现的公认列表格式。

现在人们使用 ' fixed-data-table-2 '得到薛定谔公司的持续支持。较早的'fixed-data-table ' 被放弃作为公共(public)组件。

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

• 可以处理数千行列表数据而不会陷入困境滚动和其他响应能力。
• 单元格渲染器的原理意味着任何行列都可以渲染任何内容HTML5 提供的内容(文本、图像、视频等)。

因此对于某些应用程序来说，这个列表组件可以是正确的。一个缺点可能是上述包装原则和列渲染器方法的初始学习曲线。