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中文網其他相關文章!