react key報(bào)錯(cuò)如何解決

這篇文章主要介紹“react key報(bào)錯(cuò)如何解決”，在日常操作中，相信很多人在react key報(bào)錯(cuò)如何解決問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”react key報(bào)錯(cuò)如何解決”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

react key報(bào)錯(cuò)的解決辦法：1、在報(bào)錯(cuò)的頁面搜索“map”或者“forEach”方法，然后添加唯一的key標(biāo)識(shí)符；2、給footer里面自定義的按鈕添加“key”屬性即可。

react key值報(bào)錯(cuò)分析

使用react的時(shí)候很容易出現(xiàn)key報(bào)錯(cuò)的問題，一般的解決方式就是，再報(bào)錯(cuò)的頁面搜索 map 或者 forEach 這倆個(gè)方法，添加唯一的key標(biāo)識(shí)符

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

就會(huì)報(bào)如下圖的錯(cuò)誤

這是你就需要給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>

到此，關(guān)于“react key報(bào)錯(cuò)如何解決”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！