Upgrading react-virtualized gives error: Super expression must either be null or a function, not undefined

Question

我从 react-virtualized 8.11 升级 --> 9.1，收到以上错误。考虑文档重大更改：

1- 我正在使用 React 版本 0。15.X

2- 我没有使用 CellMeasurer 组件。

除了上述提到的以外，你们中有人经历过升级到 react-virtualized 9 的重大变化吗？我在升级的时候没有做其他改动。

VirtualizedTable.js

import React, { Component, PropTypes }        from 'react';
import { AutoSizer, Table, Column, defaultTableRowRenderer }       from 'react-virtualized';
import classnames                             from 'classnames';
import { Input } from 'react-bootstrap';
import 'react-virtualized/styles.css';
// import '../sass/components/virtualized-table.scss';

export default class VirtualizedTable extends Component {
  static propTypes = {
    schema: PropTypes.shape({
      instanceType: PropTypes.string,
      searchable: PropTypes.bool,
      skeleton: PropTypes.arrayOf(PropTypes.shape({
        key: PropTypes.string,
        label: PropTypes.string,
        display: PropTypes.string,
        sortable: PropTypes.bool
      }))
    }).isRequired,
    data: PropTypes.arrayOf(PropTypes.object).isRequired,
    onRowClick: PropTypes.func,
    rowClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
    rowRenderFn: PropTypes.func,
    statusRenderFn: PropTypes.func,
    actionsRenderFn: PropTypes.func,
    sortBy: PropTypes.string,
    sortDirection: PropTypes.oneOf(['ASC', 'DESC']),
    maxHeight: PropTypes.number
  };
  constructor(props) {
    super(props);
    this.state = {
      sortBy: 'name',
      sortDirection: 'ASC',
      tableFilter: ''
    };
    this.sort = this.sort.bind(this);
    this.onFilterChange = this.onFilterChange.bind(this);
  }
  componentDidMount() {
    if (this.props.sortBy) {
      this.setState({
        sortBy: this.props.sortBy
      });
    }
    if (this.props.sortDirection) {
      this.setState({
        sortDirection: this.props.sortDirection
      });
    }
  }
  sort({ sortBy, sortDirection }) {
    if (this.state.sortBy !== sortBy) {
      this.setState({ sortBy });
    } else {
      this.setState({ sortBy, sortDirection });
    }
  }
  onFilterChange (e) {
    this.setState({ tableFilter: e.target.value });
  }
  escapeRegex (str) {
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\^$\|]/g, '\$&');
  }
  render() {
    const { showFilter } = this.props;
    let sortedList = this.props.data;
    if (this.state.tableFilter) {
      let regex = new RegExp(this.escapeRegex(this.state.tableFilter), 'i');
      sortedList = this.props.data.filter(
        item => {
          let bool = false;
          for (let key in item) {
            bool = (regex.test(item[key]));
            if (bool) break;
          }
          if (bool) return item;
        }
      );
    }
    if (this.state.sortBy) {
      sortedList = sortedList.sort(
        (a, b) => typeof a[this.state.sortBy] === 'string' ?
          a[this.state.sortBy] < b[this.state.sortBy]
        :
          a[this.state.sortBy] - b[this.state.sortBy]
      );
      if (this.state.sortDirection === 'DESC') {
        sortedList.reverse();
      }
    }
    let columns = this.props.schema.skeleton.filter(item => item.display !== 'hidden');
    const rowHeight = this.props.rowHeight || 40;
    const headerHeight = this.props.headerHight || 40;
    return (
      <div className='table-container'>
        {
          (showFilter) ?
            <div className='ac-filter-container' style={{ width: '15%' }}>
              <Input
                type='text'
                onChange={this.onFilterChange.bind(this)}
                value={this.state.tableFilter}
                placeholder={this.props.filterText || 'Filter results...'}
              />
            </div>
          :
            null
        }
        <AutoSizer disableHeight>
          {({ width: autoWidth }) => {
            // Use Static width if provided - NOTE: For Testing Purposes
            const width = this.props.width || autoWidth;
            return (
              <Table
                className={classnames('table', {'collapsed': width < 1000})}
                width={width}
                height={(sortedList.length + 1) * rowHeight > this.props.maxHeight ? this.props.maxHeight : (sortedList.length + 1) * rowHeight}
                headerHeight={headerHeight}
                rowHeight={rowHeight}
                rowClassName={this.props.rowClassName}
                rowRenderer={this.props.rowRenderFn || defaultTableRowRenderer}
                rowCount={sortedList.length}
                rowGetter={({ index }) => sortedList[index]}
                sort={this.sort}
                sortBy={this.state.sortBy}
                sortDirection={this.state.sortDirection}
                onRowClick={({index}) => this.props.onRowClick(this.props.data[index])}
              >
                {
                  columns.map((column, i) => {
                    return (
                      <Column
                        key={i}
                        label={column.label}
                        dataKey={column.key}
                        disableSort={column.sortable}
                        width={width / columns.length}
                      />
                    );
                  })
                }
              </Table>
            );
          }}
        </AutoSizer>
      </div>
    );
  }
}

TablContainer.js

import React, {Component} from 'react';

// Components
import VirtualizedTable from '../../components/VirtualizedTable3';
import {objects} from '../objects';
import shouldComponentUpdate from '../../utils/shouldComponentUpdate';


export default class TableContainer extends Component {

  constructor(props) {
    super(props);
    this.shouldComponentUpdate = shouldComponentUpdate.bind(this);
  }

  render() {
    let schema = {
      instanceType: 'integer',
      searchable: true,
      skeleton: [{
        key: 'id',
        label: 'id',
        display: 'true',
        sotrable: true
      }, {
        key: 'name',
        label: 'name',
        display: 'true',
        sotrable: true
      }]
    };

    return (
      <div className='container'>
        <h1>React Virtualized Table</h1>

        {
          <VirtualizedTable
            schema={schema}
            data={objects}
            onRowClick={() => console.log('U did it!')}
            sortByDefault='id'
            sortDirection='DESC'
          />
        }

      </div>
    );
  }
}

Answer 1

9.0.0 release notes 提出了 2 项重大更改：CellMeasurer 和 required/supported React 版本：

Supported React versions have changed. Previously all React 14 and 15 releases were supported. Going forward only React 15.3 and newer will be supported. This was done to drop a peer dependency on react-addons-shallow-compare and replace it with React.PureComponent as the docs suggest.

您似乎没有使用所需的 React 版本。（NPM/Yarn 应该会在您安装时警告您存在无效的对等依赖项。）

Upgrading react-virtualized gives error: Super expression must either be null or a function, not undefined

Upgrading react-virtualized gives error: Super expression must either be null or a function, not undefined

reactjs

react-virtualized