問題描述：

      在剛開始接觸react學習的時候，編寫一個小功能時，使用了map來迴圈一個數組中的資料，輸出到前端頁面，程式碼除錯執行後正常顯示，但是開啟控制檯卻發現有一條關於“key”的報錯訊息，詳細資訊如下：

      上網查閱資料得知，此錯誤出現是因為與react中的diff演算法有關係;

      簡單的理解就是：react中迴圈輸出時要有一個key，並且這個key不能重複

解決方法：

      1 定義一個變數，賦值為0，然後定義key，讓其值從0開始增加，如下所示：

constructor(props){ //元件初始化函式，一呼叫元件就自動執行
super(props); //初始化一些引數，不必理會
this.state={ //定義state來存放資料
list:[
'learn react',
'learn english'
],
reactid:0 //此引數主要是解決key的報錯問題而定義
}
}


<ul>
{
this.state.list.map((item)=>{
return <li key={'li_'+this.state.reactid++}>{item}</li>;
})
}
</ul>
 

      解決之後開啟控制檯發現，只有一條警告資訊，之前的錯誤訊息已經沒有了：

      2 如果從陣列中通過map獲取值，我們除了能獲取到值之外還能獲取到它的索引，所以我們可以用獲取到的索引來對他進行key的定義，如下：

<ul>
{
this.state.list.map((item,index)=>{
return <li key={index}>{item}</li>;
})
}
</ul>