Question

获取错误 - TypeError：list.get不是函数

我的父组件：

import TableExample from './TableExample';

// Map Redux state to component props
function mapStateToProps(state) {
    return {
        dirList: state.filelistReducer.dirList,
        showFileViewer: state.sidenavReducer.showFileViewer,
    }
}
// Map Redux actions to component props
function mapDispatchToProps(dispatch) {

    return {
        onDirClick: (path) => { dispatch(actions.fetchFileListAction(path, dispatch)); },
    };
}
/**
 *
 *
 * @class FileViewerComponent
 * @extends {Component}
 */
class FileListViewComponent extends Component {
    constructor(props) {
        super(props);
        this.state = { width: 0 }

    }

    render() {
        return (
            <div>
                <div className="col-md-10">
                    <div className="contentviewdivider" style={{ width: (this.state.width) + 'px' }}></div>
                    <div className="mainContainer" style={{ width: (this.state.width) + 'px' }}>
                        <div className="tilerow">
                            {this.renderList()}
                        </div>
                    </div>
                </div>
            </div>
        );
    }

   renderList() { 
     return (
         <div>
            <div className={this.props.showFileViewer}>
                <div className='row'>
                    <TableExample filelist={this.props.dirList} />
                </div>
            </div>
        </div>
     );
}


}
export default connect(mapStateToProps, mapDispatchToProps)(FileListViewComponent);

现在在TableExample.jsx

中

/** @flow */
import Immutable from 'immutable';
import { List } from 'immutable';
import React, { PropTypes, PureComponent } from 'react';
import ReactDom from 'react-dom';
import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox'
import { LabeledInput, InputRow } from '../demo/LabeledInput'
import {AutoSizer,Column, Table, SortDirection, SortIndicator}  from 'react-virtualized'
import styles from '../../../styles/css/components/tableexample.css'
//import { generateRandomList } from './utils'

export default class TableExample extends PureComponent {
//  static contextTypes = {
//     list: PropTypes.instanceOf(Immutable.List).isRequired
//   };

  constructor (props) {
    super(props)

    this.state = {
      disableHeader: false,
      headerHeight: 30,
      height: 270,
      hideIndexRow: false,
      overscanRowCount: 10,
      rowHeight: 40,
      rowCount: 1000,
      scrollToIndex: undefined,
      sortBy: 'index',
      sortDirection: SortDirection.ASC,
      useDynamicRowHeight: false
    }

    this._getRowHeight = this._getRowHeight.bind(this)
    this._headerRenderer = this._headerRenderer.bind(this)
    this._noRowsRenderer = this._noRowsRenderer.bind(this)
    this._onRowCountChange = this._onRowCountChange.bind(this)
    this._onScrollToRowChange = this._onScrollToRowChange.bind(this)
    this._rowClassName = this._rowClassName.bind(this)
    this._sort = this._sort.bind(this)
  }

  render () {
    const {
      disableHeader,
      headerHeight,
      height,
      hideIndexRow,
      overscanRowCount,
      rowHeight,
      rowCount,
      scrollToIndex,
      sortBy,
      sortDirection,
      useDynamicRowHeight
    } = this.state



    console.log('render of tableexample');
    console.log(this.props);

     const list = this.props.filelist;

    const sortedList = this._isSortEnabled()
      ? list
        .sortBy(item => item[sortBy])
        .update(list =>
          sortDirection === SortDirection.DESC
            ? list.reverse()
            : list
        )
      : list

    const rowGetter = ({ index }) => this._getDatum(sortedList, index)

    return (
      <ContentBox>
        <div className="table table-striped">
          <AutoSizer disableHeight>
            {({ width }) => (
              <Table
                ref='Table'
                disableHeader={disableHeader}
                headerClassName={styles.headerColumn}
                headerHeight={headerHeight}
                height={height}
                noRowsRenderer={this._noRowsRenderer}
                overscanRowCount={overscanRowCount}
                rowClassName={this._rowClassName}
                rowHeight={useDynamicRowHeight ? this._getRowHeight : rowHeight}
                rowGetter={rowGetter}
                rowCount={rowCount}
                scrollToIndex={scrollToIndex}
                sort={this._sort}
                sortBy={sortBy}
                sortDirection={sortDirection}
                width={width}
              >
                {!hideIndexRow &&
                  <Column
                    label='Index'
                    cellDataGetter={
                      ({ columnData, dataKey, rowData }) => rowData.index
                    }
                    dataKey='index'
                    disableSort={!this._isSortEnabled()}
                    width={60}
                  />
                }
                <Column
                  dataKey='name'
                  disableSort={!this._isSortEnabled()}
                  headerRenderer={this._headerRenderer}
                  width={90}
                />
                <Column
                  width={210}
                  disableSort
                  label='The description label is really long so that it will be truncated'
                  dataKey='random'
                  className={styles.exampleColumn}
                  cellRenderer={
                    ({ cellData, columnData, dataKey, rowData, rowIndex }) => cellData
                  }
                  flexGrow={1}
                />
              </Table>
            )}
          </AutoSizer>
        </div>
      </ContentBox>
    )
  }

  _getDatum (list, index) {

    // Getting error here : TypeError: list.get is not a function[Learn More]

    return list.get(index % list.size)
  }

  _getRowHeight ({ index }) {
    const list = this.props.filelist;

    return this._getDatum(list, index).size
  }

  _headerRenderer ({
    columnData,
    dataKey,
    disableSort,
    label,
    sortBy,
    sortDirection
  }) {
    return (
      <div>
        Full Name
        {sortBy === dataKey &&
          <SortIndicator sortDirection={sortDirection} />
        }
      </div>
    )
  }

  _isSortEnabled () {
    const list= this.props.filelist;
    const { rowCount } = this.state

    return rowCount <= list.size
  }

  _noRowsRenderer () {
    return (
      <div className={styles.noRows}>
        No rows
      </div>
    )
  }

  _onRowCountChange (event) {
    const rowCount = parseInt(event.target.value, 10) || 0

    this.setState({ rowCount })
  }

  _onScrollToRowChange (event) {
    const { rowCount } = this.state
    let scrollToIndex = Math.min(rowCount - 1, parseInt(event.target.value, 10))

    if (isNaN(scrollToIndex)) {
      scrollToIndex = undefined
    }

    this.setState({ scrollToIndex })
  }

  _rowClassName ({ index }) {
    if (index < 0) {
      return styles.headerRow
    } else {
      return index % 2 === 0 ? styles.evenRow : styles.oddRow
    }
  }

  _sort ({ sortBy, sortDirection }) {
    this.setState({ sortBy, sortDirection })
  }

  _updateUseDynamicRowHeight (value) {
    this.setState({
      useDynamicRowHeight: value
    })
  }
}

我内心得到了错误 -

 _getDatum (list, index) {

    // Getting error here : TypeError: list.get is not a function[Learn More]
    return list.get(index % list.size)
  }

我没有使用不可变列表，而是使用我自己的对象。如果我做

console.log(this.props.filelist) // Object { filelist: Array[12] }

0:Object 
absPath:"/home/testmaximumcharactersforfolders123"
created:1490586030000
filename:"testmaximumcharactersforfolders123"
hasChildren:true
isHidden:false
isReadable:true
isWritable:false
modified:1490586030000
owner:"root"
size:4096
type:"FILE_DIR"

我还有一个问题，因为你可以看到我的对象结构应该是什么应该是我的datakey？根据我使用datakey的理解，我们在对象中引用键名。如果我想在列中显示文件名数据，那么它应该是datakey =“filename”吗？如果我的对象包含我不会在表中显示的其他键值对，这样可以吗？

请帮忙......

重叠的屏幕截图：

react-virtualized getting error - TypeError：list.get不是函数

0 个答案: