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; 

當運行I'm收到以下錯誤：

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）還是隱藏（假）。

查看類BuildObjectDataListStore。 在那裏有一個方法'getObjectAt'，它在被調用時根據輸入變量名稱檢索列表行列。 例如

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

意味着，如果在指數44名單行包含「添加my_id」一個名爲列 則該列的值將在您添加my_id變量結束。 這僅適用於列名「下劃線」作爲分隔符， 如此作出了諸如「我的-ID」列的任何列表必須在「固定數據表」使用之前被轉換成 「添加my_id」。 BuildObjectDataListStore中存在一個整潔的轉換表過程。

這裏是你如何包裝一個普通列表陣列「myList中」到一個對象，該 固定數據表」可以呈現：

this.dataList = new BuildObjectDataListStore(myList); 

然後該目的包裹成一個對象與濾光器陣列沿：

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

那裏你有它; DataListWrapper是'fixed-data-table'可以呈現的公認列表格式。

現在人們使用「fixed-data-table-2」 蜚薛定諤，公司繼續支持 早期的「fixed-data-table」被放棄作爲一個公共的組件。

從固定數據表的基礎演化而來，固定數據表-2的功率至少是雙重的;

• 可以應付數千行列表數據，而不會因滾動和其他響應性而陷入困境。
• 單元格渲染器的原理意味着任何行列都可以渲染HTML5提供的任何東西（文本，圖像，視頻等）。

因此，對於某些應用程序，這個列表組件可以被發現。缺點可能是上述包裝原理和列渲染器方法的初始學習曲線。