Сортировка нескольких одинаковых значений ramda реагирует на крючки - PullRequest
Новая
       19

Сортировка нескольких одинаковых значений ramda реагирует на крючки

0 голосов
/ 10 апреля 2020

Этот код не мой и нашел его только в кодах и коробке. Я не совсем уверен, как это должно быть исправлено, но каждый раз, когда я использую эти функции в массиве с одинаковыми значениями, они не сортируются, а умножаются. Я использовал библиотеку ramda для этого следующего js проекта.

кстати, это прекрасно работает, когда у меня нет нескольких значений для сортировки в массиве

Это код 

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>
        )
      })}
    </>
  )
}

1 Ответ

0 голосов
/ 11 апреля 2020

Я попробовал другой подход к сортировке, что вместо Рамды я следовал этому, и это прекрасно работает даже с t ie выключателями https://www.smashingmagazine.com/2020/03/sortable-tables-react/

...