【問(wèn)題描述】在使用ForEach循環(huán)渲染List視圖時(shí)，只顯示第一個(gè)元素或者顯示不全。問(wèn)題示例代碼及效果圖：
【問(wèn)題分析】出現(xiàn)問(wèn)題當(dāng)然是先直奔最權(quán)威的官網(wǎng)ForEach使用文檔，API說(shuō)明提到：
在ForEach循環(huán)渲染過(guò)程中，系統(tǒng)會(huì)為每個(gè)數(shù)組元素生成一個(gè)唯一且持久的鍵值，用于標(biāo)識(shí)對(duì)應(yīng)的組件。當(dāng)鍵值變化時(shí)，ArkUI框架會(huì)視為該數(shù)組元素已被替換或修改，并會(huì)基于新的鍵值創(chuàng)建一個(gè)新的組件。
ForEach提供了一個(gè)名為keyGenerator的參數(shù)，這是一個(gè)函數(shù)，開(kāi)發(fā)者可以通過(guò)它自定義鍵值的生成規(guī)則。如果開(kāi)發(fā)者沒(méi)有定義keyGenerator函數(shù)，則ArkUI框架會(huì)使用默認(rèn)的鍵值生成函數(shù)，即(item: Object, index: number) => { return index + '__' + JSON.stringify(item); }。
ArkUI框架對(duì)于ForEach的鍵值生成有一套特定的判斷規(guī)則，這主要與itemGenerator函數(shù)和keyGenerator函數(shù)的第二個(gè)參數(shù)index有關(guān)。具體的鍵值生成規(guī)則判斷邏輯如下圖所示:
ForEach鍵值生成規(guī)則.png
其中的index即數(shù)組下標(biāo)。也就是說(shuō)，在使用ForEach時(shí)，要確保列表數(shù)據(jù)展示的完整性，就要確保每個(gè)item的鍵值是唯一的。結(jié)合ForEach構(gòu)造函數(shù)：
(arr: Array<any>, itemGenerator: (item: any, index: number) => void, keyGenerator?: (item: any, index: number) => string): ForEachAttribute;
【解決方法】根據(jù)問(wèn)題分析中的ForEach鍵值生成規(guī)則，可以通過(guò)以下方式解決：
-
聲明itemGenerator的index參數(shù)，但是不聲明keyGenerator的index參數(shù)。這樣會(huì)默認(rèn)使用系統(tǒng)的鍵值生成函數(shù)，即(item: Object, index: number) => { return index + '__' + JSON.stringify(item); }，確保元素唯一性：添加itemGenerator的index參數(shù).png
該方式最便捷，通用性也高，不過(guò)如果item的字段很多或內(nèi)容很長(zhǎng)，那默認(rèn)生成的鍵值也會(huì)很大，影響性能。
-
聲明itemGenerator和的keyGenerator的index參數(shù)，同時(shí)確保keyGenerator的函數(shù)返回值是唯一的：添加index參數(shù)確保keyGenerator函數(shù)返回值唯一.png
-
不聲明itemGenerator的index參數(shù)，但聲明keyGenerator的index參數(shù)，同時(shí)確保keyGenerator的函數(shù)返回值是唯一的：只聲明keyGenerator的index參數(shù).png
-
不聲明itemGenerator和keyGenerator的index參數(shù)，但是要確保keyGenerator的函數(shù)返回值是唯一的：不聲明index參數(shù)但是keyGenerator返回值唯一.png
【小結(jié)】以上四種解決方式已覆蓋ForEach的鍵值生成規(guī)則，item內(nèi)容較小可考慮使用第一種方式；其他根據(jù)實(shí)際情況使用另外三種，注意確保keyGenerator函數(shù)返回值的唯一性即可。
