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'veはとしての私の最初のコードに来

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 | 

をI'veは運と異なるJSON構造を試してみました。データとスキーマはそれに従ってロードされます。ヘルプはそれを解決するために感謝します。

Answer 1

これは、文字通り、最初は周囲を気にするのに時間がかかります。

'fixed-data-table-2'のコードへの参照を使用して説明します。

テーブル内で使用されるデータリストは、データリストとデータリストフィルタ配列で構成されるオブジェクトにラップされます（ ）。 リストデータは、 DataListWrapperオブジェクトとしてフィルタ配列と共にラップした場合にのみ表示されます。 フィルタ配列の各エントリは、対応する リスト行が表示されるか（true）、非表示になるかを指定するブール値です偽）。

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'がレンダリングできる認識されたリスト形式です。

今日では、人々はシュレーディンガー、Inc.の継続的な支援を楽しんでいます「fixed-data-table-2」 を使用 以前の「fixed-data-tableは」公共のコンポーネントとして放棄されています。

固定データテーブルの基礎から発展するにつれて、固定データテーブル-2の能力は少なくとも2倍です。

• スクロールとその他の応答性が低下することなく、何千もの行のリストデータに対応できます。
• セルレンダラーの原理は、任意の行の列がHTML5の提供（テキスト、画像、ビデオ、など）何も をレンダリングするために行うことができることを意味します。

ので、いくつかのアプリケーションのために、このリストのコンポーネントは、上のスポットすることができます。欠点は、前述のラッピング原則と列のレンダラ法の初期の学習曲線することができます。