反应FixedDataTable单元总是得到一切都是undefined

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

// ...