react key 報錯怎麼辦

react key報錯的解決方法：1、在報錯的頁面搜尋“map”或“forEach”方法，然後添加唯一的key標識符；2、給footer裡面自訂的按鈕添加“key”屬性即可。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react key 報錯怎麼辦？

react key值報錯分析

使用react的時候很容易出現key報錯的問題，一般的解決方式就是，再報錯的頁面搜尋map或者forEach 這兩個方法，添加唯一的key標識符

{arr.map(item)=>{
<div value={item.name} key={item.id}>{item.name}</div>
}
}(切记key必须是唯一的，如果没有唯一值，你可以使用index作为key值)
{arr.map(item，index)=>{
<div value={item.name} key={index}>{item.name}</div>
}
}

也有特殊情況，你使用了Modal組件，並且自定義了裡面的footer屬性

就會報如下圖的錯誤

這是你就需要給footer裡面自訂的按鈕新增key屬性，程式碼如下

<Model 
title:"新建"
visible={visible}
onCancel={()=>this.onCancel}
onOk={()=>this.onOk}
width={500}
footer={[
<div>
<Button key="submit" onClick={this.save}>保存</Button>
<Button key="back" onClick={this.cancelBack}>取消</Button>
</div>
]}
 ></Modal>

推薦學習：《react視頻教程》

以上是react key 報錯怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！