【问题标题】：React/Javascript Sort complex functionReact/Javascript 排序复杂函数
【发布时间】：2021-10-10 19:41:53
【问题描述】：

我正在尝试处理在 dsc 和 asc 之间切换的排序函数。它还需要处理称为“标题”的某个表列名称。预期结果是对“天”或“站”进行排序，并分别在 dsc 和 asc 之间切换。

handleClick={(val: any, header: string) =>
  val((val: any) => {
    const result = [...val].sort((a: any, b: any) => {
      return sortOrder === 'asc'
        ? header === 'Station'
          ? b.station - a.station
          : b.days - a.days
        : header === 'Station'
          ? a.station - b.station
          : a.days - b.days;
    });
    setSortOrder(sortOrder === 'asc' ? 'dsc' : 'asc');
    return result;
  })
}

这是我当前正确过滤的功能站，但“自上次事件以来的天数”似乎不起作用。

这是handleClick子函数

onClick={() => props.handleClick(setFilteredData, header)}

这是数据样本

[
  {
    days: 23,
    station: "Braidwood",
  },
  {
    days: 18,
    station: "Byron",
  },
  {
    days: 28,
    station: "Byron",
  },
  {
    days: 32,
    station: "Calvert Cliffs",
  },
  {
    days: 20,
    station: "Dresden",
  },
  {
    days: 320,
    station: "Dresden",
  },
];

【问题讨论】：

你能解释一下你想要发生什么吗？我猜你希望它按一个属性或另一个，或第一个，然后另一个...但不是很清楚。
问题从您更改 sortOrder 状态开始，但是，您应该知道 setState 有一些“超时”并且它不会立即更新。 developpaper.com/on-the-data-delay-in-this-setstate
@MattMorgan 它按一个属性或另一个属性排序是正确的
@yairmea 是的，我认为你是对的，我认为需要为该州的哪个属性存储哪个 asc 顺序

标签： javascript reactjs function sorting methods

【解决方案1】：

问题

在编写时，您的处理程序对filteredData 的副本进行排序然后切换排序顺序。这意味着实际顺序总是与当前的sortOrder 状态相反。

如果我不得不猜测，我会说 onClick 处理程序应该切换排序顺序，然后您希望使用 filteredData 状态。

解决方案

onClick 处理程序应该切换状态，并且可以在依赖于 sortOrder 和 header 状态的 useEffect 挂钩中完成重新定位。

React.useEffect(() => {
  setFilteredData(data => data.slice().sort((a: any, b: any) => {
    return sortOrder === 'asc'
      ? header === 'Station'
        ? b.station - a.station
        : b.days - a.days
      : header === 'Station'
        ? a.station - b.station
        : a.days - b.days;
  }));
}, [header, sortOrder]);

const toggleSortOrder = (header: string) => () => {
  setSortOrder(sortOrder === 'asc' ? 'dsc' : 'asc');
  setSortHeader(header);
};

...

handleClick={toggleSortOrder(header)}

此外，由于升序/降序功能基本相同，我建议将排序比较器转换为交换输入并返回更简单的比较器函数的高阶函数。

const customSort = (sortOrder = 'asc', header = 'Station') => {
  const comparator = (a: any, b: any) => header === 'Station'
    ? b.station - a.station
    : b.days - a.days;
  return sortOrder === 'asc' ? comparator : (a, b) => comparator(b, a);
}

React.useEffect(() => {
  setFilteredData(data => data.slice().sort(customSort(sortOrder, header)));
}, [header, sortOrder]);

【讨论】：