react文件中render中，相同的的key值引起的页面显示bug

刚开始的代码，，简写如下:

render(){
    const buttonKeys = [
        {
            comType: 'button',
            key: 'edit',
            label: '编辑'
        },
        {
            comType: 'button',
            key: 'remove',
            label: '撤销'
        },
        {
            comType: 'button',
            key: 'delete',
            label: '删除'
        },
        {
            comType: 'button',
            key: 'audit',
            label: '审批'
        }
    ];
    
   buttonKeys.map(item=>{
       return (
           <Button
               key={item.comType}
           >
               {item.label}
           </Button>
       )
   });
}

明明是四个按钮，但是页面渲染出来有五个按钮，页面操作之后会有更多，但是页面重新刷新一下之后就又正常了 后来发现是key值相同的原因 改一下key就可以了

buttonKeys.map(item=>{
       return (
           <Button
               key={item.key}
           >
               {item.label}
           </Button>
       )
});

这样就可以解决啦～～