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>
    )
}
}

控制台.log（周期数据）：

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}>

// ...