React实现表格排序报TypeError: items is not iterable错误

1. 入参类型完全不符合函数预期 #

你调用useSortableData时的写法是：

useSortableData({ myArrayOfObjects })

这里用大括号包裹传入参数，是ES6的对象简写语法，等价于向函数传入了一个结构为{ myArrayOfObjects: 你的实际数组数据 }的普通对象，没有把myArrayOfObjects数组本身传入函数。
useSortableData内部执行[...items]时，普通对象没有内置可迭代接口，自然会抛出TypeError: items is not iterable的错误。

2. 空数组默认值未生效的原因 #

你给items配置的默认参数items = []，仅当传入的items值为undefined时才会触发。当前场景下你明确传入了一个对象，参数值不是undefined，默认值逻辑根本不会执行，自然无法解决报错。 #

去掉传参时包裹数组的对象大括号，直接把数组本身作为参数传入：

// 错误写法
const { items, requestSort, sortConfig } = useSortableData({ myArrayOfObjects });
// 正确写法
const { items, requestSort, sortConfig } = useSortableData(myArrayOfObjects);

如果你的myArrayOfObjects是异步接口返回的，初始阶段可能为undefined/null，可以在排序逻辑里加类型兜底，避免后续再出现同类报错：

const sortedItems = useMemo(() => {
  // 非数组类型直接返回空数组，跳过后续展开、排序逻辑
  if (!Array.isArray(items)) return [];
  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]);

内容的提问来源于stack exchange，提问作者Jon