React-sortable-tree: No node found at the given path

[bigjujube]

All packages are up to date，This is an example of how to reproduce this error

https://codesandbox.io/s/ywlkpqnmnj

Step 1: Click tmp option to expand.

Step 2: Click a child of tmp.

Step 3: Click src option to expand.

Step 4: Click a child of src .

In my project, I need get the last key path to find the last node data.
Please click on the options in order

[fritz-c]

Thank you for reproducing the issue with codesandbox. That really helped.
The issue is that the path changes whenever you expand the src node, because by default, all nodes use their position in the visible part of the tree as their key
i.e.,

folder 0/         // treeIndex === key === 0
├─ [─] folder 1/  // treeIndex === key === 1
│   ├── file1.js  // treeIndex === key === 2
│   └── file2.js  // treeIndex === key === 3
├─ [+] folder 2/  // treeIndex === key === 4
├─ [─] folder 3/  // treeIndex === key === 5
│   └── file1.js  // treeIndex === key === 6

So if I opened up folder 2 here, and it had one child, the keys would change as follows:

folder 0/         // treeIndex === key === 0
├─ [─] folder 1/  // treeIndex === key === 1
│   ├── file1.js  // treeIndex === key === 2
│   └── file2.js  // treeIndex === key === 3
├─ [-] folder 2/  // treeIndex === key === 4
│   └── file1.js  // treeIndex === key === 5
├─ [─] folder 3/  // treeIndex === key === 6
│   └── file1.js  // treeIndex === key === 7

So if I had a path of [5, 6] from the first state of the tree, in the second state of the tree, it would look on the top level for a node with a key of 5, which we can see has been reassigned to a file on another level down, and will fail.

So you will need to come up with some unique identifier for your nodes (or add them arbitrarily before putting them in the component), and return that from getNodeKey (e.g., getNodeKey={({ node }) => node.id}).
I use treeIndex as described above to simplify configuration in basic use cases, but setting a getNodeKey to suit your own data is the best way to get stuff like this to work reliably.

[hapood]

@fritz-c Is it better using absulote position as treeIndex, seems could solve this problem.

folder 0/         // treeIndex === 0
├─ [─] folder 1/  // treeIndex === 0.0
│   ├── file1.js  // treeIndex === 0.1
│   └── file2.js  // treeIndex === 0.2
├─ [-] folder 2/  // treeIndex === 1
│   └── file1.js  // treeIndex === 1.0
├─ [─] folder 3/  // treeIndex === 2
│   └── file1.js  // treeIndex === 2.0

[bigjujube]

@fritz-c Thank you very much for your help, you solved my problem

[fritz-c]

@hapood That might solve the treeIndex problem. I'll have to look into that.