React - Сортировка столбцов таблицы внутри метода Map()

Question

Я пытаюсь отсортировать таблицу (по возрастанию / убыванию), когда данные заголовка моей таблицы помещаются в метод .map () (см. Строку 73 ссылки на codeandbox в этом сообщении).

Я могу изменить смайлики на клике, но сортировка не выполняется. Я думаю, что это может иметь какое-то отношение к передаче объекта методу map, а не к отдельной строке или числовому значению, которое находится в codeandbox, на котором я основал эту функциональность. Вот исходная песочница, после которой я моделирую:https://codesandbox.io/embed/table-sorting-example-ur2z9?fontsize=14&hidenavigation=1&theme=dark

... и вот мой кодовый ящик с моей структурой данных, которую мне нужно отсортировать:https://codesandbox.io/s/table-sorting-example-forked-dofhj?file=/src/App.js

Что я могу изменить, чтобы каждый столбец можно было сортировать? Любая помощь / совет будут очень благодарны.

App.js

      import React from "react";
import "./styles.css";
import {
  Button,
  Table,
  Thead,
  Tbody,
  Flex,
  Tooltip,
  Tr,
  Th,
  Td
} from "@chakra-ui/react";

//Table Headers
const TABLE_HEADERS = [
  { name: "ID Number" },
  { name: "User Type" },
  { name: "User Category" },
  { name: "User Interest" }
];

const useSortableData = (items, config = null) => {
  const [sortConfig, setSortConfig] = React.useState(config);

  const sortedItems = React.useMemo(() => {
    let sortableItems = [...items];
    if (sortConfig !== null) {
      sortableItems.sort((a, b) => {
        if (a[sortConfig.key] < b[sortConfig.key]) {
          return sortConfig.direction === "ascending" ? -1 : 1;
        }
        if (a[sortConfig.key] > b[sortConfig.key]) {
          return sortConfig.direction === "ascending" ? 1 : -1;
        }
        return 0;
      });
    }
    return sortableItems;
  }, [items, sortConfig]);

  const requestSort = (key) => {
    let direction = "ascending";
    if (
      sortConfig &&
      sortConfig.key === key &&
      sortConfig.direction === "ascending"
    ) {
      direction = "descending";
    }
    setSortConfig({ key, direction });
  };

  return { items: sortedItems, requestSort, sortConfig };
};

const ProductTable = (props) => {
  const { items, requestSort, sortConfig } = useSortableData(
    props.myUserErrorTypes
  );

  const getClassNamesFor = (name) => {
    if (!sortConfig) {
      return;
    }
    return sortConfig.key === name ? sortConfig.direction : undefined;
  };
  return (
    <Table>
      <caption>User Error Types</caption>
      <Thead>
        <Tr>
          {TABLE_HEADERS.map(({ name, description, isNumeric }) => (
            <Th key={name} isNumeric={isNumeric}>
              <Button
                type="button"
                onClick={() => requestSort(name)}
                className={getClassNamesFor(name)}
              >
                <Tooltip label={description} aria-label={description}>
                  {name}
                </Tooltip>
              </Button>
            </Th>
          ))}
        </Tr>
      </Thead>
      <Tbody>
        {items.map((error) => {
          const { userNumber, userType, errorId, errorCategory } = error;
          return (
            <React.Fragment key={errorId}>
              <Tr id={errorId} key={errorId}>
                <Td>{userNumber}</Td>
                <Td>{userType}</Td>
                <Td>{errorId}</Td>
                <Td>{errorCategory}</Td>
                <Td textAlign="center">
                  <Flex justify="justifyContent"></Flex>
                </Td>
              </Tr>
            </React.Fragment>
          );
        })}
      </Tbody>
    </Table>
  );
};

export default function App() {
  return (
    <div className="App">
      <ProductTable
        myUserErrorTypes={[
          {
            userNumber: 1234567890,
            userType: "SuperUser",
            errorId: 406,
            errorCategory: "In-Progress"
          },
          {
            userNumber: 4859687937,
            userType: "NewUser",
            errorId: 333,
            errorCategory: "Complete"
          }
        ]}
      />
    </div>
  );
}

Answer 1

Элементы сортируются по имени заголовка таблицы (например, 'ID Number'), поскольку вы звоните по имени. Добавить id свойство к объектам в массиве, совпадающим с именем свойства (например, userNumber) в объектах данных и передать его в качестве аргумента обоим requestSort а также getClassNamesFor функции.

      const TABLE_HEADERS = [
  { name: 'ID Number', id: 'userNumber' },
  { name: 'User Type', id: 'userType' },
  { name: 'User Category', id: 'errorId' },
  { name: 'User Interest', id: 'errorCategory' },
]

      {
  TABLE_HEADERS.map(({ name, id }) => (
    <Th key={id}>
      <Button
        type="button"
        onClick={() => requestSort(id)}
        className={getClassNamesFor(id)}
      >
        {name}
      </Button>
    </Th>
  ))
}

Вы также пытаетесь использовать description а также isNumeric значения из объекта заголовка, но они оба undefined. Возможно, вы захотите добавить эти свойства к объектам в TABLE_HEADERS множество.