reactjs - React FixedDataTable セルは常にすべてが未定義になる

Question

React FixedDataTable を使用しようとしていますが、常にすべてが未定義です。私はまだこのライブラリに慣れていないので、何が問題なのかを誰かが教えてくれます。

ここに私のフォームがあります:

import React from 'react';
const {Table, Column, Cell} = require('fixed-data-table');

class MyCell extends React.Component {
  render() {
    var {rowIndex, data, field, ...props} = this.props;
    return (
      <Cell {...props}>
        {data[rowIndex][field]}
      </Cell>
    );
  }
}

export default class PeriodTable extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    const {periodTableHeader, periodTableField, periodData} = this.props;

    console.log(periodData);
    console.log(periodTableHeader);
    console.log(periodTableField);

    return (

      <div>
          <Table
            rowsCount={100}
            rowHeight={50}
            headerHeight={50}
            width={1000}
            height={500}>
            {periodTableHeader.map((data, index) => {
              let header = periodTableHeader[index]
              let field = periodTableField[index];
              return(
                <Column
                  header={<Cell>{header}</Cell>}
                  cell={<MyCell data={periodData} field={field} />}
                  width={200}
                />
              )
            })}
          </Table>
        </div>
    )
}
}

console.log (期間データ):

console.log (期間テーブルヘッダー):

console.log(期間テーブルフィールド):

私の構文は多分間違っていますか？

Answer 1

まず、periodDataオブジェクトの配列にする必要があります。あなたからconsole.log(periodData)見ると、それは単なるオブジェクトです。オブジェクトの配列を必ず送信してください。

2番目rowsCountに渡すTable必要があるのはperiodData.length

それはあなたのテーブルにデータをロードするはずです。

 <Table
        rowsCount={periodData.length}
        rowHeight={50}
        headerHeight={50}
        width={1000}
        height={500}>

// ...