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)我看到它只是一个对象。确保发送一系列对象。

您传递给rowsCount的第二个Table应为periodData.length

这应该会加载表格中的数据。

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

// ...