出现错误 - TypeError: list.get is not a function
我的父组件：
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 的理解，我们在 object 中引用键名。那么如果我想在列中显示文件名数据，它应该是 datakey="filename" 吗？如果我的对象包含我不会在表中显示的其他键值对，是否可以？
请帮忙...
重叠截图：
