0
309
ViewsUsing useSortableData based on useMemo() after data update in React app
I've made application based on this example
https://codesandbox.io/embed/table-sorting-example-ur2z9?fontsize=14&hidenavigation=1&theme=dark
But also I need data update in table (adding, removing)
I use
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);
}
But after data update useSortableData function is sorting initially added data How to make useSortableData use updated data?
I've tried
const [datarows, setDatarows] = useState(data.items)
const { items, requestSort, sortConfig } = useSortableData(datarows, sortObj);
But in this case I get
Unhandled Runtime Error
TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method.
Thanks
2 answers
Answer question0
Looking at the code you provided it looks like useSortableData is has items as a dependency in the useMemo of the sortedItems. Meaning that any changes to data.items will result in a recalculation of the sorted items.
You have not provided the piece of code from where you get data.items, therefore this is the extent of what I can help with
0
Solved.
Data loading and changing left in main Component.
The table and sorting
const { items, requestSort, sortConfig } = useSortableData(data.items, sortObj);
moved to other component