Javascript 如何将列排序功能添加到表中？

我现在已经尝试了几个小时在react虚拟化表上添加排序功能，但我的大脑无法控制它。。。这是和。很抱歉，我无法创建plnkr，因此我已将链接附加到我的github

当我使用输入文本螺钉提交表单时，会出现此错误，例如：

TypeError: list.sortBy is not a function
    at PartTable._sortList (PartTable.js:136)
    at new PartTable (PartTable.js:18)

在上的示例中，他们使用上下文（

const{list}=this.context；

）而不是道具。也许这就是问题所在

当我记录控制台日志

this.props.list

时，我得到了正确的列表（参见两个示例文档）

这里有两个对象来自我的服务器并进入

props.list

[
  {
    customsTariff: "73181568",
    facility: "SDC",
    netWeight: "0,07",
    partName: "CAPSCREW",
    partNumber: "3121210233",
    __v: 0,
    _id: "59a9429ac0b7467bf084eb6e"
  },
  {
    customsTariff: "73481568",
    facility: "SDC",
    netWeight: "0,08",
    partName: "CAPSCREW2",
    partNumber: "3121210333",
    __v: 0,
    _id: "59a9429ac0b7463bf084eb6e"
  }
];

这是来自PartTable.js的代码

import React, { PureComponent } from "react";
import { AutoSizer, Column, Table } from "react-virtualized";
import { CSVLink, CSVDownload } from "react-csv";
import Button from "material-ui/Button";
import PropTypes from "prop-types";
import SortDirection from "./SortDirection";
import SortIndicator from "./SortIndicator";
import Checkbox from "material-ui/Checkbox";
import "react-virtualized/styles.css";
import "../../styles/App.css";
import styles from "./Table.example.css";

export default class PartTable extends PureComponent {
  constructor(props) {
    super(props);
    const sortBy = "partNumber"; // I want to sort by partNumber by default
    const sortDirection = SortDirection.ASC;
    const sortedList = this._sortList({ sortBy, sortDirection });

    this.state = {
      sortBy,
      sortDirection,
      rowCount: 1000,
      sortedList
    };
    this._noRowsRenderer = this._noRowsRenderer.bind(this);
    this._generateCheckbox = this._generateCheckbox.bind(this);
    this._sort = this._sort.bind(this);
  }

  render() {
    // console.log(this.props.list);
    const { sortBy, sortDirection, sortedList } = this.state;
    const rowGetter = ({ index }) => this._getDatum(sortedList, index);
    const { list, headers } = this.props;
    return (
      <div>
        <AutoSizer disableHeight>
          {({ width }) => (
            <Table
              width={width}
              height={500}
              headerHeight={50}
              rowHeight={50}
              rowCount={list.length}
              rowGetter={rowGetter}
              noRowsRenderer={this._noRowsRenderer}
              sort={this._sort}
              sortBy={sortBy}
              sortDirection={sortDirection}
            >
              {headers.map(header => {
                return (
                  <Column
                    key={header.id}
                    label={header.label}
                    dataKey={header.id}
                    disableSort
                    width={100}
                    flexGrow={1}
                    cellRenderer={
                      header.index ? this._generateCheckbox : undefined
                    }
                  />
                );
              })}
            </Table>
          )}
        </AutoSizer>
        <CSVLink data={list}>
          <Button color="accent">Export {list.length} records to CSV</Button>
        </CSVLink>
      </div>
    );
  }

  _noRowsRenderer() {
    return <div>No Parts here...</div>;
  }
  _generateCheckbox(event) {
    // console.log(event);
    return (
      <div className="table-check-box">
        {this.props.activeCheckboxes && (
          <Checkbox
            onChange={() => this.props._activeCheckbox(event.rowData._id)}
            checked={this.props.activeCheckboxes.includes(event.rowData._id)}
          />
        )}
        {event.cellData}
      </div>
    );
  }
  _isSortEnabled() {
    const { list } = this.props;
    const { rowCount } = this.state;
    return rowCount <= list.size;
  }

  _getDatum(list, index) {
    return list.get(index % list.size);
  }

  _sort({ sortBy, sortDirection }) {
    const sortedList = this._sortList({ sortBy, sortDirection });

    this.setState({ sortBy, sortDirection, sortedList });
  }

  _sortList({ sortBy, sortDirection }) {
    const { list } = this.props;

    // console.log(list);

    return list
      .sortBy(item => item[sortBy])
      .update(
        list => (sortDirection === SortDirection.DESC ? list.reverse() : list)
      );
  }
  _rowClassName({ index }) {
    if (index < 0) {
      return styles.headerRow;
    } else {
      return index % 2 === 0 ? styles.evenRow : styles.oddRow;
    }
  }
}

PartTable.PropTypes = {
  list: PropTypes.arrayOf({}).isRequired,
  activeCheckboxes: PropTypes.arrayOf({}),
  _activeCheckbox: PropTypes.func,
  headers: PropTypes.arrayOf({}.isRequired)
};

import React，{PureComponent}来自“React”；
从“react virtualized”导入{AutoSizer，Column，Table}；
从“react csv”导入{CSVLink，CSVDownload}；
从“物料界面/按钮”导入按钮；
从“道具类型”导入道具类型；
从“/SortDirection”导入SortDirection；
从“/SortIndicator”导入SortIndicator；
从“物料界面/复选框”导入复选框；
导入“react virtualized/styles.css”；
导入“../../styles/App.css”；
从“/Table.example.css”导入样式；
导出默认类PartTable扩展PureComponent{
建造师（道具）{
超级（道具）；
const sortBy=“partNumber”；//我想默认按partNumber排序
const sortDirection=sortDirection.ASC；
const sortedList=这个。\排序列表（{sortBy，sortDirection}）；
此.state={
糟糕的是，
肮脏的方向，
行数：1000，
分类表
};
this.\u norowsrender=this.\u norowsrender.bind（this）；
this.\u generateCheckbox=this.\u generateCheckbox.bind（this）；
this.\u sort=this.\u sort.bind（this）；
}
render（）{
//console.log（this.props.list）；
const{sortBy，sortDirection，sortedList}=this.state；
const rowGetter=（{index}）=>this.\u getDatum（sortedList，index）；
const{list，headers}=this.props；
返回(
{（{width}）=>(
{headers.map（header=>{
返回(
);
})}
)}
将{list.length}记录导出到CSV
);
}
_诺洛斯（）{
这里不退零件。。。；
}
_generateCheckbox（事件）{
//console.log（事件）；
返回(
{this.props.active复选框&&(
this.props.\u activeCheckbox（event.rowData.\u id）}
checked={this.props.activecheckbox.includes（event.rowData.\u id）}
/>
)}
{event.cellData}
);
}
_isSortEnabled（）{
const{list}=this.props；
const{rowCount}=this.state；
返回行计数项目[排序方式]）
.更新(
list=>（sortDirection===sortDirection.DESC？list.reverse（）：list）
);
}
_rowClassName（{index}）{
如果（指数<0）{
返回样式.headerRow；
}否则{
返回索引%2==0？styles.evenRow:styles.oddRow；
}
}
}
PartTable.PropTypes={
列表：需要PropTypes.arrayOf（{}）.isRequired，
ActiveCheckBox:PropTypes.arrayOf（{}），
_activeCheckbox:PropTypes.func，
标题：PropTypes.arrayOf（{}.isRequired）
};

基于您的代码引用了

列表。length

-您接受的

列表

道具可能是一个数组？

sortBy

方法（假设您从react虚拟化文档中提取了该方法）属于一个。对要使用的JavaScript数组进行排序

附加说明：如果我确认您使用的是数组，那么您粘贴的代码还有一些对

List

方法（例如

List.get（index）

）的其他引用，您需要将这些方法替换为括号（例如

List[index]

）

PartTable.js的完整代码解决方案 （作者提供）

import React，{PureComponent}来自“React”；
进口{
自动发生器，
专栏，
桌子
肮脏的方向，
排序指示器
}从“反应虚拟化”；
从“react csv”导入{CSVLink，CSVDownload}；
从“物料界面/按钮”导入按钮；
从“道具类型”导入道具类型；
从“物料界面/复选框”导入复选框；
导入“react virtualized/styles.css”；
导入“../../styles/App.css”；
从“/Table.example.css”导入样式；
导出默认类PartTable扩展PureComponent{
建造师（道具）{
超级（道具）；
const sortBy=“零件号”；
const sortDirection=sortDirection.ASC；
const sortedList=这个。\排序列表（{sortBy，sortDirection}）；
此.state={
列表：this.props.list，
糟糕的是，
肮脏的方向，
分类列表，
行数：1000
};
this.\u norowsrender=this.\u norowsrender.bind（this）；
this.\u generateCheckbox=this.\u generateCheckbox.bind（this）；
this.\u sort=this.\u sort.bind（this）；
}
render（）{
const{headers}=this.props；
const{list，sortBy，sortDirection，sortedList，rowCount}=this.state；
const rowGetter=（{index}）=>this.\u getDatum（sortedList，index）；
返回(
{（{width}）=>(
list[index]}/（{index}）=>list[index]
noRowsRenderer={this.\u noRowsRenderer}
onHeaderClick={this.\u sortBycledHeader}
排序={this.\u sort}
sortBy={sortBy}
sortDirection={sortDirection}
>
{headers.map（header=>{
返回(
);
})}
)}
将{list.length}记录导出到CSV
);
}
_getDatum（列表、索引）{
返回列表[索引]；
}
_排序（{sortBy，sortDirection}）{
const sortedList=这个。\排序列表（{sortBy，sortDirection}）；
this.setState（{sortBy，sortDirection，sortedList}）；
}
_排序列表（{sortBy，sortDirection}）{
const{list}=this.props；
import React, { PureComponent } from "react";
import { AutoSizer, Column, Table } from "react-virtualized";
import { CSVLink, CSVDownload } from "react-csv";
import Button from "material-ui/Button";
import PropTypes from "prop-types";
import SortDirection from "./SortDirection";
import SortIndicator from "./SortIndicator";
import Checkbox from "material-ui/Checkbox";
import "react-virtualized/styles.css";
import "../../styles/App.css";
import styles from "./Table.example.css";

export default class PartTable extends PureComponent {
  constructor(props) {
    super(props);
    const sortBy = "partNumber"; // I want to sort by partNumber by default
    const sortDirection = SortDirection.ASC;
    const sortedList = this._sortList({ sortBy, sortDirection });

    this.state = {
      sortBy,
      sortDirection,
      rowCount: 1000,
      sortedList
    };
    this._noRowsRenderer = this._noRowsRenderer.bind(this);
    this._generateCheckbox = this._generateCheckbox.bind(this);
    this._sort = this._sort.bind(this);
  }

  render() {
    // console.log(this.props.list);
    const { sortBy, sortDirection, sortedList } = this.state;
    const rowGetter = ({ index }) => this._getDatum(sortedList, index);
    const { list, headers } = this.props;
    return (
      <div>
        <AutoSizer disableHeight>
          {({ width }) => (
            <Table
              width={width}
              height={500}
              headerHeight={50}
              rowHeight={50}
              rowCount={list.length}
              rowGetter={rowGetter}
              noRowsRenderer={this._noRowsRenderer}
              sort={this._sort}
              sortBy={sortBy}
              sortDirection={sortDirection}
            >
              {headers.map(header => {
                return (
                  <Column
                    key={header.id}
                    label={header.label}
                    dataKey={header.id}
                    disableSort
                    width={100}
                    flexGrow={1}
                    cellRenderer={
                      header.index ? this._generateCheckbox : undefined
                    }
                  />
                );
              })}
            </Table>
          )}
        </AutoSizer>
        <CSVLink data={list}>
          <Button color="accent">Export {list.length} records to CSV</Button>
        </CSVLink>
      </div>
    );
  }

  _noRowsRenderer() {
    return <div>No Parts here...</div>;
  }
  _generateCheckbox(event) {
    // console.log(event);
    return (
      <div className="table-check-box">
        {this.props.activeCheckboxes && (
          <Checkbox
            onChange={() => this.props._activeCheckbox(event.rowData._id)}
            checked={this.props.activeCheckboxes.includes(event.rowData._id)}
          />
        )}
        {event.cellData}
      </div>
    );
  }
  _isSortEnabled() {
    const { list } = this.props;
    const { rowCount } = this.state;
    return rowCount <= list.size;
  }

  _getDatum(list, index) {
    return list.get(index % list.size);
  }

  _sort({ sortBy, sortDirection }) {
    const sortedList = this._sortList({ sortBy, sortDirection });

    this.setState({ sortBy, sortDirection, sortedList });
  }

  _sortList({ sortBy, sortDirection }) {
    const { list } = this.props;

    // console.log(list);

    return list
      .sortBy(item => item[sortBy])
      .update(
        list => (sortDirection === SortDirection.DESC ? list.reverse() : list)
      );
  }
  _rowClassName({ index }) {
    if (index < 0) {
      return styles.headerRow;
    } else {
      return index % 2 === 0 ? styles.evenRow : styles.oddRow;
    }
  }
}

PartTable.PropTypes = {
  list: PropTypes.arrayOf({}).isRequired,
  activeCheckboxes: PropTypes.arrayOf({}),
  _activeCheckbox: PropTypes.func,
  headers: PropTypes.arrayOf({}.isRequired)
};

import React, { PureComponent } from "react";
import {
  AutoSizer,
  Column,
  Table,
  SortDirection,
  SortIndicator
} from "react-virtualized";
import { CSVLink, CSVDownload } from "react-csv";
import Button from "material-ui/Button";
import PropTypes from "prop-types";
import Checkbox from "material-ui/Checkbox";
import "react-virtualized/styles.css";
import "../../styles/App.css";
import styles from "./Table.example.css";

export default class PartTable extends PureComponent {
  constructor(props) {
    super(props);

    const sortBy = "partNumber";
    const sortDirection = SortDirection.ASC;
    const sortedList = this._sortList({ sortBy, sortDirection });

    this.state = {
      list: this.props.list,
      sortBy,
      sortDirection,
      sortedList,
      rowCount: 1000
    };
    this._noRowsRenderer = this._noRowsRenderer.bind(this);
    this._generateCheckbox = this._generateCheckbox.bind(this);
    this._sort = this._sort.bind(this);
  }

  render() {
    const { headers } = this.props;
    const { list, sortBy, sortDirection, sortedList, rowCount } = this.state;

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

    return (
      <div>
        <AutoSizer disableHeight>
          {({ width }) => (
            <Table
              width={width}
              height={500}
              headerHeight={50}
              rowHeight={50}
              rowClassName={this._rowClassName}
              rowCount={rowCount}
              rowGetter={({ index }) => list[index]} // ({ index }) => list[index]
              noRowsRenderer={this._noRowsRenderer}
              onHeaderClick={this._sortByClickedHeader}
              sort={this._sort}
              sortBy={sortBy}
              sortDirection={sortDirection}
            >
              {headers.map(header => {
                return (
                  <Column
                    key={header.id}
                    label={header.label}
                    dataKey={header.id}
                    width={100}
                    flexGrow={1}
                    cellRenderer={
                      header.index ? this._generateCheckbox : undefined
                    }
                  />
                );
              })}
            </Table>
          )}
        </AutoSizer>
        <CSVLink data={list}>
          <Button color="accent">Export {list.length} records to CSV</Button>
        </CSVLink>
      </div>
    );
  }

  _getDatum(list, index) {
    return list[index];
  }

  _sort({ sortBy, sortDirection }) {
    const sortedList = this._sortList({ sortBy, sortDirection });

    this.setState({ sortBy, sortDirection, sortedList });
  }

  _sortList({ sortBy, sortDirection }) {
    const { list } = this.props;
    if (sortBy) {
      let updatedList =
        // sort by name
        list.sort(function(a, b) {
          var nameA = a[sortBy].toUpperCase(); // ignore upper and lowercase
          var nameB = b[sortBy].toUpperCase(); // ignore upper and lowercase
          if (nameA < nameB) {
            return -1;
          }
          if (nameA > nameB) {
            return 1;
          }
          // names must be equal
          return 0;
        });
      sortDirection === SortDirection.DESC
        ? updatedList.reverse()
        : updatedList;
    }
  }

  _noRowsRenderer() {
    return <div>No Parts here...</div>;
  }
  _generateCheckbox(event) {
    // console.log(event);
    return (
      <div className="table-check-box">
        {this.props.activeCheckboxes && (
          <Checkbox
            onChange={() => this.props._activeCheckbox(event.rowData._id)}
            checked={this.props.activeCheckboxes.includes(event.rowData._id)}
          />
        )}
        {event.cellData}
      </div>
    );
  }
}

PartTable.PropTypes = {
  list: PropTypes.arrayOf({}).isRequired,
  activeCheckboxes: PropTypes.arrayOf({}),
  _activeCheckbox: PropTypes.func,
  headers: PropTypes.arrayOf({}.isRequired)
};