React虛擬拋出錯誤 - TypeError：_reactVirtualized2.default未定義

我剛剛在我的項目中集成了react-virtualized。我使用與演示表中使用的代碼相同的代碼。React虛擬拋出錯誤 - TypeError：_reactVirtualized2.default未定義

https://github.com/bvaughn/react-virtualized/blob/master/source/Table/Table.example.js

有了一個變化 - 而不是從

static contextTypes = { 
    list: PropTypes.instanceOf(Immutable.List).isRequired 
};

獲取數據，我用我的虛擬數據列表。

listview.jsx：

/** @flow */ 
import Immutable from 'immutable'; 
import React, { Component } from 'react'; 
import { ContentBox } from 'react-virtualized'; 
import AutoSizer from 'react-virtualized'; 
import Column from 'react-virtualized'; 
import Table from 'react-virtualized'; 
import SortDirection from 'react-virtualized'; 
import SortIndicator from 'react-virtualized'; 
import styles from 'react-virtualized'; 

export default class listview extends Component { 
    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() { 
    var myList = [ 
    { 
     index: 0, 
     name : 'arjita', 
     random : 'Curabitur eu pellentesque nisl.' 
    }, 
    { 
     index: 1, 
     name : 'mitu', 
     random : 'Etiam non consequat est.' 
    } 
    ]; 

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

    const { list } = myList; 
    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> 
      <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) { 
    return list.get(index % list.size) 
    } 

    _getRowHeight ({ index }) { 
    var myList = [ 
    { 
     index: 0, 
     name : 'arjita', 
     random : 'Curabitur eu pellentesque nisl.' 
    }, 
    { 
     index: 1, 
     name : 'mitu', 
     random : 'Etiam non consequat est.' 
    } 
    ]; 
    const { list } = myList; 

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

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

    _isSortEnabled() { 
    var myList = [ 
    { 
     index: 0, 
     name : 'arjita', 
     random : 'Curabitur eu pellentesque nisl.' 
    }, 
    { 
     index: 1, 
     name : 'mitu', 
     random : 'Etiam non consequat est.' 
    } 
    ]; 
    const { list } = this.myList; 
    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 
    }) 
    } 
}

我包含在另一個組件listview.jsx -

mainComponent.jsx

import React, { Component } from 'react'; 
import Fileviewer from '../../components/fileviewer/fileviewer'; 
import Listview from '../../components/fileviewer/listview'; 

export default class mainComponent extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      showComponent : false, 
      listComponent : true 
     }; 
    } 

    render() { 
     return (
      <div> 
       <div className="pull-right"> 
        <span className="listIconClass glyphicon glyphicon-th-list" onClick={this.onListButtonClick}></span> 
        <a className="tileIconClass glyphicon glyphicon-th" onClick={this.onTileButtonClick}></a> 
        <span className="helpIcon glyphicon glyphicon-info-sign"></span> 
       </div> 
       <div> 
        {this.state.showComponent ? 
         <Fileviewer /> : 
         null 
        } 

       </div> 
       <div> 
        {this.state.listComponent ? 
         <Listview /> : 
         null 
        } 
       </div> 
      </div> 
     ); 
    } 
}

完蛋了。但我的桌子不來了。總是得到同樣的錯誤，

類型錯誤：_reactVirtualized2.default未定義

如果我擴大了錯誤，那麼 -

listview http://localhost:3000/static/js/bundle.js:97073:8 
    ReactCompositeComponent._constructComponentWithoutOwner/< http://localhost:3000/static/js/bundle.js:26146:19 
    measureLifeCyclePerf http://localhost:3000/static/js/bundle.js:25926:13 
    ReactCompositeComponent._constructComponentWithoutOwner http://localhost:3000/static/js/bundle.js:26145:17 
    ReactCompositeComponent._constructComponent http://localhost:3000/static/js/bundle.js:26131:17 
    ReactCompositeComponent.mountComponent http://localhost:3000/static/js/bundle.js:26039:17 
    ReactReconciler.mountComponent http://localhost:3000/static/js/bundle.js:18490:19 
    ReactChildReconciler.updateChildren http://localhost:3000/static/js/bundle.js:25675:36 
    ReactMultiChild.Mixin._reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:25197:12 
    ReactMultiChild.Mixin._updateChildren http://localhost:3000/static/js/bundle.js:25301:27 
    ReactMultiChild.Mixin.updateChildren http://localhost:3000/static/js/bundle.js:25288:8 
    ReactDOMComponent.Mixin._updateDOMChildren http://localhost:3000/static/js/bundle.js:22471:8 
    ReactDOMComponent.Mixin.updateComponent http://localhost:3000/static/js/bundle.js:22289:6 
    ReactDOMComponent.Mixin.receiveComponent http://localhost:3000/static/js/bundle.js:22251:6 
    ReactReconciler.receiveComponent http://localhost:3000/static/js/bundle.js:18569:6 
    ReactChildReconciler.updateChildren http://localhost:3000/static/js/bundle.js:25663:10 
    ReactMultiChild.Mixin._reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:25197:12 
    ReactMultiChild.Mixin._updateChildren http://localhost:3000/static/js/bundle.js:25301:27 
    ReactMultiChild.Mixin.updateChildren http://localhost:3000/static/js/bundle.js:25288:8 
    ReactDOMComponent.Mixin._updateDOMChildren http://localhost:3000/static/js/bundle.js:22471:8 
    ReactDOMComponent.Mixin.updateComponent http://localhost:3000/static/js/bundle.js:22289:6 
    ReactDOMComponent.Mixin.receiveComponent http://localhost:3000/static/js/bundle.js:22251:6 
    ReactReconciler.receiveComponent http://localhost:3000/static/js/bundle.js:18569:6 
    ReactCompositeComponent._updateRenderedComponent http://localhost:3000/static/js/bundle.js:26605:8 
    ReactCompositeComponent._performComponentUpdate http://localhost:3000/static/js/bundle.js:26575:6 
    ReactCompositeComponent.updateComponent http://localhost:3000/static/js/bundle.js:26496:8 
    ReactCompositeComponent.receiveComponent http://localhost:3000/static/js/bundle.js:26398:6 
    ReactReconciler.receiveComponent http://localhost:3000/static/js/bundle.js:18569:6 
    ReactChildReconciler.updateChildren http://localhost:3000/static/js/bundle.js:25663:10 
    ReactMultiChild.Mixin._reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:25197:12 
    ReactMultiChild.Mixin._updateChildren http://localhost:3000/static/js/bundle.js:25301:27 
    ReactMultiChild.Mixin.updateChildren http://localhost:3000/static/js/bundle.js:25288:8 
    ReactDOMComponent.Mixin._updateDOMChildren http://localhost:3000/static/js/bundle.js:22471:8 
    ReactDOMComponent.Mixin.updateComponent http://localhost:3000/static/js/bundle.js:22289:6 
    ReactDOMComponent.Mixin.receiveComponent http://localhost:3000/static/js/bundle.js:22251:6 
    ReactReconciler.receiveComponent http://localhost:3000/static/js/bundle.js:18569:6 
    ReactCompositeComponent._updateRenderedComponent http://localhost:3000/static/js/bundle.js:26605:8 
    ReactCompositeComponent._performComponentUpdate http://localhost:3000/static/js/bundle.js:26575:6 
    ReactCompositeComponent.updateComponent http://localhost:3000/static/js/bundle.js:26496:8 
    ReactCompositeComponent.performUpdateIfNecessary http://localhost:3000/static/js/bundle.js:26412:8 
    ReactReconciler.performUpdateIfNecessary http://localhost:3000/static/js/bundle.js:18601:6 
    runBatchedUpdates http://localhost:3000/static/js/bundle.js:18181:6 
    TransactionImpl.perform http://localhost:3000/static/js/bundle.js:19511:14 
    TransactionImpl.perform http://localhost:3000/static/js/bundle.js:19511:14 
    .perform http://localhost:3000/static/js/bundle.js:18120:13 
    flushBatchedUpdates http://localhost:3000/static/js/bundle.js:18203:8 
    bound self-hosted:915:17 
    TransactionImpl.closeAll http://localhost:3000/static/js/bundle.js:19577:12 
    TransactionImpl.perform http://localhost:3000/static/js/bundle.js:19524:12 
    ReactDefaultBatchingStrategy.batchedUpdates http://localhost:3000/static/js/bundle.js:28914:15 
    batchedUpdates http://localhost:3000/static/js/bundle.js:18128:11 
    ReactEventListener.dispatchEvent http://localhost:3000/static/js/bundle.js:29074:8 
    bound self-hosted:957:17

請幫幫忙！

來源

2017-03-22 Arjita Mitra

import { ContentBox } from 'react-virtualized'; 
import AutoSizer from 'react-virtualized'; 
import Column from 'react-virtualized'; 
import Table from 'react-virtualized'; 
import SortDirection from 'react-virtualized'; 
import SortIndicator from 'react-virtualized'; 
import styles from 'react-virtualized';

您的進口錯了。退房Table docs example：

import { Column, Table } from 'react-virtualized'; 
import 'react-virtualized/styles.css'; // only needs to be imported once

你可以看到的東西可導入的here完整列表。

在你的情況你應該進口看起來更像：

// You don't need this. It isn't exported anyway. 
// It's only used in the demo site. 
import { ContentBox } from 'react-virtualized'; 
// Same thing for this. 
import styles from 'react-virtualized'; 
// These are the ones you want: 
import { 
    AutoSizer, 
    Column, 
    SortDirection, 
    SortIndicator, 
    Table 
} from 'react-virtualized';

來源

2017-03-22 18:34:33 brianvaughn

能否請你幫我在這個問題上 - http://stackoverflow.com/questions/43087031/react-virtualized-getting-error-typeerror -list-get-is-a-function- –

您應該將此答案標記爲正確。 – brianvaughn

React虛擬拋出錯誤 - TypeError：_reactVirtualized2.default未定義

回答

相關問題