React-sortable-tree: Refresh tree after adding element

Created on 16 Dec 2019  路  6Comments  路  Source: frontend-collective/react-sortable-tree

Hi, I used
and I have situations when treeData is changed after adding new elements in tree
state with treeData is changed but SortableTree is not updated, I can see new elements only after any actions with SortableTree like dragging.
Is there way to refresh SortableTree after some actions not in SortableTree?

Most helpful comment

I found the solution by inserting spread. For example, code before was:

const addCategory = async (node, lowerSiblingCounts) => { const route = lowerSiblingCounts.slice(0, lowerSiblingCounts.length - 1); const result = await updatingTree(node, treeData, route, 0); setTreeData(result); };

And now it's:
const addCategory = async (node, lowerSiblingCounts) => { const route = lowerSiblingCounts.slice(0, lowerSiblingCounts.length - 1); const result = await updatingTree(node, treeData, route, 0); setTreeData([...result]); };

All 6 comments

Did Anyone find solution?

The state might be getting mutated which prevents rerender. If the state is not mutated than React will handle the rerender.

does anyone has a solution on this??

I found the solution by inserting spread. For example, code before was:

const addCategory = async (node, lowerSiblingCounts) => { const route = lowerSiblingCounts.slice(0, lowerSiblingCounts.length - 1); const result = await updatingTree(node, treeData, route, 0); setTreeData(result); };

And now it's:
const addCategory = async (node, lowerSiblingCounts) => { const route = lowerSiblingCounts.slice(0, lowerSiblingCounts.length - 1); const result = await updatingTree(node, treeData, route, 0); setTreeData([...result]); };

does anyone has a solution on this??

Maybe this can help you

setTreeData([...result]) did the trick for me. Spent too much time trying to figure out the issue so thank you very much nestorovicevo!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

anushkadoyan picture anushkadoyan  路  4Comments

robhadfield picture robhadfield  路  3Comments

29er picture 29er  路  5Comments

vladimirsvsv77 picture vladimirsvsv77  路  5Comments

CrazyCodingBanana picture CrazyCodingBanana  路  4Comments