反应“类型错误：项目不可迭代”

问题描述

我正在尝试将此表格排序解决方案实施到我正在开发的应用程序中。这是我正在尝试实现的具有排序功能的工作代码和框： 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,sortConfig } = useSortableData({ myArrayOfObjects });

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

解决方法

谢谢，泷。做到了！

 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,sortConfig } = useSortableData(myArrayOfObjects);

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