JavaScript排序处理程序不整理我的桌子

Question

我是新手。我正在使用Material-UI v3.9.3来渲染一个来自数组中的测试数据的表。我在很大程度上依赖于表组件的材料-UI示例页面上提供的示例代码。

我的表将渲染，但是，它不会用我的默认状态值和排序方向排序。结果，我为单击的桌子标头所拥有的活动处理程序也不会发射。他们只需显示箭头图标，即当我单击它们时，它"应该"对其进行排序的方向。我的代码似乎很接近，这是在https://material-ui.com/demos/tables/上提供的示例。我已经梳理了代码，只是无法将我的头缠绕在错误的位置。任何建议都将不胜感激。

我尝试更改" table_sort"函数上的参数值，并完全删除"稳定的array"对所有分类，然后将原始数据传递到我的" 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>
    );
  }

Answer 1

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

所以，减少看起来像

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

Answer 2

已解决。问题与我在数据阵列中的命名命名约定有关。这些功能本身效果很好。感谢所有回应的人。