React 'TypeError: элементы не повторяются'

Question

Я пытаюсь реализовать это решение для сортировки таблиц в приложении, над которым я работаю. Вот рабочий код и ящик с функцией сортировки, которую я пытаюсь реализовать:https://codesandbox.io/s/table-sorting-gxt7g?file=/src/App.js

Однако когда я пытаюсь реализовать это решение в своем приложении, я получаю сообщение об ошибке:

      TypeError: items is not iterable

который указывает на строку, содержащую let sortableItems = [...items]. Я получаю эту ошибку независимо от того, инициализирую ли я элементы как пустой массив: const useSortableData = (items = [], config = null) => { ... или как у меня ниже.

Я пытаюсь пройти myArrayOfObjects к useSortableData().

Кто-нибудь видит, что я делаю неправильно?

Я должен упомянуть, что это основано на примере из этой статьи: https://www.smashingmagazine.com/2020/03/sortable-tables-react/

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

    const sortedItems = 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 { items, requestSort, sortConfig } = useSortableData({ myArrayOfObjects });

  const getClassNamesFor = (id) => {
    if (!sortConfig) {
      return;
    }
    return sortConfig.key === id ? sortConfig.direction : undefined;
  };

Answer 1

Спасибо, Таки. Вот и все!

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

    const sortedItems = 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 { items, requestSort, sortConfig } = useSortableData(myArrayOfObjects);

  const getClassNamesFor = (id) => {
    if (!sortConfig) {
      return;
    }
    return sortConfig.key === id ? sortConfig.direction : undefined;
  };