排序多个相同的值ramda react hooks

Question

此代码不是我的，只能在codesandbox上找到。我不完全确定应该如何解决此问题，但是每次我在具有相同值的数组上使用这些函数时，它们不会被排序，而是将值相乘。我将ramda库用于此nextjs项目。

btw，当我没有多个值要在数组中排序时，这很好用

这是代码

function sortedTableReducer(oldState, newState) {
  const { isDescending, key, table } = { ...oldState, ...newState }
  const direction = isDescending ? descend : ascend
  const sortFunc = sort(direction(prop(key)))
  return { isDescending, key, table: sortFunc(table) }
}

function useSortedTable(table, key, isDescending = true) {
  const initialState = { isDescending, key, table }
  const [state, dispatch] = useReducer(sortedTableReducer, initialState)
  useEffect(function callDispatchOnceToTriggerInitialSort() {
    dispatch({})
  }, [])
  return [state, dispatch]
}

function SortTh({ label, sortKey, data, dispatch }) {
  function toggleDirAndSetKey() {
    dispatch({ key: sortKey })
    dispatch({ isDescending: !data.isDescending })
  }
  function setKeyOrToggleDir() {
    if (data.key === sortKey) {
      dispatch({ isDescending: !data.isDescending })
    } else {
      dispatch({ key: sortKey })
    }
  }

  return (
    <>
      <button
        onClick={setKeyOrToggleDir}
      >
        {label}

        <button
          onClick={toggleDirAndSetKey}
          style={{
            outline: 0,
            opacity: data.key === sortKey ? '1' : '0'
          }}
        >
          {data.isDescending ? (
                <span role="img" aria-label="descending" className="pl-1">
                  ↓
                </span>
              ) : (
                <span role="img" aria-label="ascending" className="pl-1">
                  ↑
                </span>
              )}
            </button>
          </button>
        </>
      )
    }

const Table = () => {
  const [sorted, sortDispatch] = useSortedTable(mock_data.rows, 'sort_date')

  return (
    <>
      <SortTh data={sorted} sortKey="name" label="Name" dispatch={sortDispatch} />
      {sorted.table.map(({ sort_date, name }) => {
        return (
          <div key={sort_date}>
            <span> {name} </span> <br />
          </div>
        )
      })}
    </>
  )
}

Answer 1

我尝试了一种不同的排序方法，而不是使用Ramda，而是按照此方法进行，即使在使用抢七局https://www.smashingmagazine.com/2020/03/sortable-tables-react/的情况下，该方法也可以正常使用>