Problem Description
Today’s test brought up a bug about the incomplete display of the tree component (actually a problem with component rendering errors). Since this part of the code was written by others before, but the current project is under my control, so naturally the bug should be modified!
Solution
After looking at the code, as well as the corresponding interface access and console error reporting, the lock is probably caused by the same key!
With the same key, an error occurs in the rendering of the tree component!
Check out the official documentation
You can see that the keys of the same set of data are the same! So it can be analyzed that the bug is due to the rendering error caused by having the same key.
view code
Because the key of the first grade is the same as the key of class one of the second grade, similarly, the key of the second grade is the same as the key of class one of the third grade, which leads to rendering errors. The document strictly requires that the keys in the whole tree cannot be the same. Therefore, Just modify the key in the grade.
I changed the key in the grade to the grade name to solve the conflict problem!