javascript - 在 React 应用中更新数据后基于 useMemo() 使用 useSortableData

Question

我已经根据这个例子制作了应用程序

https://codesandbox.io/embed/table-sorting-example-ur2z9?fontsize=14&hidenavigation=1&theme=dark

但我也需要表中的数据更新（添加、删除）

我用

const { items, requestSort, sortConfig } = useSortableData(data.items, sortObj);
const [datarows, setDatarows] = useState({})

useEffect(() => {
setDatarows(items)
});

const updateData = (row, useropt) => {
...
/* here fetching some data */
...
setDatarows(rows2);
}

但是数据更新后 useSortableData 函数是对最初添加的数据进行排序 如何使 useSortableData 使用更新的数据？

我试过了

const [datarows, setDatarows] = useState(data.items)
const { items, requestSort, sortConfig } = useSortableData(datarows, sortObj);

但在这种情况下，我得到

未处理的运行时错误

TypeError：传播不可迭代实例的无效尝试。为了可迭代，非数组对象必须具有 Symbol.iterator 方法。

谢谢

Answer 1

查看您提供的代码，看起来 useSortableData 在 sortedItems 的 useMemo 中有项目作为依赖项。这意味着对 data.items 的任何更改都将导致重新计算已排序的项目。

您没有提供从哪里获得 data.items 的代码，因此这是我可以提供帮助的范围

Answer 2

解决了。

主组件左侧的数据加载和更改。表格和排序 const { items, requestSort, sortConfig } = useSortableData(data.items, sortObj); 移至其他组件