antd menu中的key设置问题

Question

问题如上图所示，出现了奇怪的紊乱，其中css3和html明显是前端那栏的展开，而非JavaScript那行

key设置如下：
const SubMenus = this.state.map((v, k) => {

return (
    <SubMenu key={k} title={
        <span>{_.keys(v)[0]}</span>
    }>
        {/* {console.log(this.parseChildrenList(v))} */}
        {this.parseChildrenList(v)}
    </SubMenu>)

})

第三个submenu的key和第一个submenu里的子submenu的key出现了紊乱，请教是怎么回事？
目前猜测是portal挂载到了menu下，求源码大神解答下。

Answer 1

不要使用数组下标作为key，使用uuid作为key，这是因为React Diff的原因，可以参考antd Table组件官方给的设置key的建议

• https://ant.design/components...
• https://reactjs.org/docs/list...