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（periodData）：

的console.log（periodTableHeader）：

的console.log（periodTableField）：

是我的語法錯誤嗎？

Answer 1

首先，您的periodData應該是一個對象數組。 從您的console.log(periodData)我看到它只是一個對象。 確保發送對象數組。

您傳遞給Table第二個rowsCount應該是periodData.length

那應該確實將數據加載到表中。

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

// ...