首頁  >  文章  >  web前端  >  react key 報錯怎麼辦

react key 報錯怎麼辦

藏色散人
藏色散人原創
2022-12-27 11:45:242408瀏覽

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

react 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屬性

就會報如下圖的錯誤

react key 報錯怎麼辦

這是你就需要給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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn