如何解决反应“类型错误:项目不可迭代”
我正在尝试将此表格排序解决方案实施到我正在开发的应用程序中。这是我正在尝试实现的具有排序功能的工作代码和框: 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;
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。