react+umi项目中出现Each child in a list should have a unique "key" prop.的错误

当我们写react的项目的时候，用循环生成dom的时候，可能会出现这样的错误

我们用百度翻译将这句报错信息翻译一下：

Each child in a list should have a unique "key" prop.

列表中的每个孩子都应该有一个唯一的“关键”道具。

不难的得出循环中的每一个dom都需要一个key,这个key需要是唯一的

下面是我控制台报错的代码，根据报错信息，我们需要给这里的每一Button加上一个key

<div>
      { data.arr?.map((item:any,index:number) => {
            return (
                <Button  onClick={item.method}>{item.name}</Button>
            )
       })}
</div>

修改之后的代码

<div>
     { data.arr?.map((item:any,index:number) => {
          return (
              <Button  key={index} onClick={item.method}>{item.name}</Button>
          )
     })}
</div>

这个时候我们再来看控制台，一片空白，干干净净。