React displays on the antd tree component

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!

 

 

 

Guess you like

Origin blog.csdn.net/weixin_45369856/article/details/128446766