JavaScript 排序处理程序没有对我的表进行排序答案

【问题标题】：JavaScript sort handler not sorting my tableJavaScript 排序处理程序没有对我的表进行排序
【发布时间】：2019-05-07 14:53:55
【问题描述】：

我是 React 新手。我正在使用 Material-UI v3.9.3 来呈现包含来自数组的一些测试数据的表格。我非常依赖于 Tables 组件的 Material-UI 示例页面上提供的示例代码。

我的表格将呈现，但是，它不会使用我的排序参数和排序方向的默认状态值进行排序。结果，我为可点击表头设置的事件处理程序也不会触发；当我单击它们时，它们只是显示它“应该”排序的方向的箭头图标。我的代码似乎与https://material-ui.com/demos/tables/ 提供的示例非常接近。我已经梳理了代码，只是无法解决问题所在。任何建议将不胜感激。

我尝试更改“table_sort”函数的参数值，以及完全删除“stabilizedArray”排序，并将原始数据传递给我的“get_sorting”函数以使其正常工作。还是没有解决问题。

  // Sorts table by descending order based on sort parameter
  sort_desc(a, b, sortBy) {
    if (b[sortBy] < a[sortBy]) {
      return -1;
    }
    if (b[sortBy] > a[sortBy]) {
      return 1;
    }
    return 0;
  }

  // Sets sort direction to ascending or descending **WIP** doesn't work
  get_sorting(sort_dir, sort_by) {
    return sort_dir === "desc"
      ? (a, b) => this.sort_desc(a, b, sort_by)
      : (a, b) => -this.sort_desc(a, b, sort_by);
  }

  // Sets up the sorting for the table based on column.
  table_sort(array, get_sorting) {
    const stabilizedArray = array.map((el, index) => [el, index]);

    stabilizedArray.sort((a, b) => {
      const order = get_sorting(a[0], b[0]);
      if (order !== 0) return order;
      return a[1] - b[1];
    });
    return stabilizedArray.map(el => el[0]);
  }

  handle_request_sort(e, property) {
    const sort_by = property;
    let sort_dir = "desc";

    if (this.state.sort_by === property && this.state.sort_dir === "desc") {
      sort_dir = "asc";
    }

    this.setState({ sort_dir, sort_by });
  }

  // Renders sorted rows for the table body. Currently renders, but doesn't sort
  row_render() {
    return (
      <React.Fragment>
        {this.table_sort(
          testData,
          this.get_sorting(this.state.sort_dir, this.state.sort_by)
        )
          .slice(
            this.state.page * this.state.rowsPerPage,
            this.state.page * this.state.rowsPerPage + this.state.rowsPerPage
          )
          .map(row => {
            return (
              <TableRow key={row.id}>
                <TableCell>
                  <Checkbox />
                </TableCell>
                <TableCell>{row.order_num}</TableCell>
                <TableCell>{row.sku}</TableCell>
                <TableCell>{row.order_date}</TableCell>
              </TableRow>
            );
          })}
      </React.Fragment>
    );
  }

【问题讨论】：

请在您问题的相关部分发布，我们不需要整个组件文件。
更新了帖子。

标签： javascript reactjs

【解决方案1】：

看起来您正在将一个从未被调用的函数返回到 order，我认为您实际上是在寻求调用 get_sorting() 中的单个项目排序函数。

所以，reduce 可能看起来像

const get_sorting = (sort_dir, sort_by) => (
   (sort_dir === "desc" ? 1 : -1) * this.sort_desc(a, b, sort_by));
);

【讨论】：

让我试试看。谢谢！
对不起，我最初的评论只是部分正确。您可以从get_sorting() 返回一个函数，但您只需要调用它，而您现在永远不会这样做。那是你的问题。当它是一个返回数字的函数时，您将订单视为数字；

【解决方案2】：

解决了。这个问题与我在数据数组中的键值命名约定有关。功能本身运行良好。感谢所有回复的人。

【讨论】：