HarmonyOS 鸿蒙Next LazyForEach没有刷新index

@ComponentV2
export struct ConditionMoreInputComp {
@Param placeholderText: string = ‘’
@Param label: string = ‘’
@Local showTxt: string = ‘’
@Param keywordsList: KeywordModel[] = []
@Event addData: (data: KeywordModel) => void
@Event removeData: (index: number) => void
dataSource: MutableArrayDataSource<KeywordModel> = new MutableArrayDataSource(this.keywordsList)

aboutToAppear(): void {
this.dataSource.pushData(new KeywordModel())
}
add() {
if (this.dataSource.totalCount() >= 5) {
toast(‘最多添加 5 组关键词’)
return
}
const empty = new KeywordModel()
this.addData(empty)
this.dataSource.pushData(empty)
}
build() {
Row() {
if (this.label) {
Text(this.label)
.fontSize(15)
.margin({ right: 5 })
.padding({
top: 12,
bottom: 12,
})
.fontColor(Colors.Color66)
}
List({ space: 10 }) {
LazyForEach(this.dataSource, (item: KeywordModel, index: number) => {
ListItem() {
ItemKeyWordComp({
isFirst: index === 0,
item: item,
add: () => {
this.add()
},
remove: () => {
LogUtil.error(‘删除的Index’ + index)
this.dataSource.removeData(index)
this.removeData(index)
}
})
}
.backgroundColor(Color.White)
}, (item: KeywordModel, index) => JSONUtil.beanToJsonStr(item) + ‘-’ + index)
}
.layoutWeight(1)
}
.alignItems(VerticalAlign.Center)
}
}
@ComponentV2
struct ItemKeyWordComp {
@Param @Once isFirst: boolean = true
@Param @Once item: KeywordModel = new KeywordModel()
@Event add: () => void
@Event remove: () => void
build() {
Row() {
Row() {
if (!this.isFirst) {
Row() {
Text(this.item.IsContains ? ‘且包含’ : ‘且不包含’,)
.fontSize(15)
.fontColor(Colors.ColorAB)
Image($r(‘app.media.ic_arrow_down’))
.fitOriginalSize(true)
.fillColor(Colors.ColorAB)
}
.borderWidth({ right: 0.2 })
.alignItems(VerticalAlign.Center)
.padding({
left: 5,
right: 5,
})
.bindMenu([
{
value: ‘且包含’,
action: () => {
this.item.IsContains
}
},
{
value: ‘且不包含’,
action: () => {
!this.item.IsContains
}
},
])
.height(‘100%’)
}
TextInput({ text: this.item.Keyword, placeholder: ‘请输入关键词’ })
.placeholderColor(Colors.ColorAB)
.placeholderFont({ size: 15 })
.maxLines(1)
.caretColor(Colors.ThemeColor)
.copyOption(CopyOptions.InApp)
.type(InputType.Normal)
.padding({
left: 5,
right: 5
})
.fontSize(15)
.fontColor(Colors.Color33)
.maxLength(50)
.enterKeyType(EnterKeyType.Next)
.showPasswordIcon(false)
.backgroundColor(Color.Transparent)
.enableKeyboardOnFocus(false)
.cancelButton({
style: CancelButtonStyle.INPUT,
icon: {
src: $r(‘app.media.ic_fork’),
color: Colors.ColorCC,
size: 14,
}
})
.layoutWeight(1)
.onChange((value) => {
this.item.Keyword = value
})
.height(‘100%’)
}
.alignItems(VerticalAlign.Center)
.height(‘100%’)
.layoutWeight(1)
.borderColor(Colors.ColorAB)
.borderRadius(3)
.borderWidth(0.2)
  <span class="hljs-title class_">Text</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">isFirst</span> ? <span class="hljs-string">' + '</span> : <span class="hljs-string">' - '</span>)
    .<span class="hljs-title function_">width</span>(<span class="hljs-number">30</span>)
    .<span class="hljs-title function_">fontSize</span>(<span class="hljs-number">15</span>)
    .<span class="hljs-title function_">textAlign</span>(<span class="hljs-title class_">TextAlign</span>.<span class="hljs-property">Center</span>)
    .<span class="hljs-title function_">fontColor</span>(<span class="hljs-title class_">Colors</span>.<span class="hljs-property">Color33</span>)
    .<span class="hljs-title function_">onClick</span>(<span class="hljs-function">() =&gt;</span> {
      <span class="hljs-variable language_">this</span>.<span class="hljs-property">isFirst</span> ? <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">add</span>() : <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">remove</span>()
    })
    .<span class="hljs-title function_">height</span>(<span class="hljs-string">'100%'</span>)
    .<span class="hljs-title function_">margin</span>({ <span class="hljs-attr">left</span>: <span class="hljs-number">3</span> })
    .<span class="hljs-title function_">padding</span>({ <span class="hljs-attr">top</span>: <span class="hljs-number">12</span>, <span class="hljs-attr">bottom</span>: <span class="hljs-number">12</span> })
    .<span class="hljs-title function_">borderColor</span>(<span class="hljs-title class_">Colors</span>.<span class="hljs-property">ColorAB</span>)
    .<span class="hljs-title function_">borderRadius</span>(<span class="hljs-number">3</span>)
    .<span class="hljs-title function_">borderWidth</span>(<span class="hljs-number">0.2</span>)
}
.<span class="hljs-title function_">height</span>(<span class="hljs-number">40</span>)
.<span class="hljs-title function_">padding</span>({ <span class="hljs-attr">right</span>: <span class="hljs-number">1</span> })
.<span class="hljs-title function_">width</span>(<span class="hljs-string">'100%'</span>)
.<span class="hljs-title function_">justifyContent</span>(<span class="hljs-title class_">FlexAlign</span>.<span class="hljs-property">Start</span>)
}
}

export default class BasicDataSource<T> implements IDataSource {
private listeners: DataChangeListener[] = []
private mutable: T[]

constructor(list: T[]) {
this.mutable = list
}
hasMore(totalCount?: number): boolean {
return this.totalCount() < (totalCount ?? 0)
}
getDataList(): T[] {
return this.mutable
}
totalCount(): number {
return this.mutable.length
}
getData(index: number): T {
return this.mutable[index]
}
notifyDataReload(): void {
this.listeners.forEach(listener => {
listener.onDataReloaded()
})
}
notifyDataAdd(index: number): void {
this.listeners.forEach(listener => {
listener.onDataAdd(index)
})
}
notifyDataChange(index: number): void {
this.listeners.forEach(listener => {
listener.onDataChange(index)
})
}
notifyDataDelete(index: number): void {
this.listeners.forEach(listener => {
listener.onDataDelete(index)
})
}
notifyDataMove(from: number, to: number): void {
this.listeners.forEach(listener => {
listener.onDataMove(from, to)
})
}
registerDataChangeListener(listener: DataChangeListener): void {
if (this.listeners.indexOf(listener) < 0) {
this.listeners.push(listener)
}
}
unregisterDataChangeListener(listener: DataChangeListener): void {
const pos = this.listeners.indexOf(listener)
if (pos >= 0) {
this.listeners.splice(pos, 1)
}
}
}
import BasicDataSource from ‘./base/BasicDataSource’
export default class MutableArrayDataSource<T> extends BasicDataSource<T> {
private dataList: T[]
constructor(list: T[] = []) {
super(list)
this.dataList = list
}
public getDataList(): T[] {
return this.dataList
}
public totalCount(): number {
return this.dataList.length
}
public getData(index: number): T {
return this.dataList[index]
}
public addData(index: number, data: T) {
this.dataList.splice(index, 0, data)
this.notifyDataAdd(index)
}
public pushDataList(dataList: T[]) {
dataList.forEach((item) => {
this.dataList.push(item)
this.notifyDataAdd(this.dataList.length - 1)
})
}
public pushData(data: T) {
this.dataList.push(data)
this.notifyDataAdd(this.dataList.length - 1)
}
public removeData(index: number) {
this.dataList.splice(index, 1)
this.notifyDataDelete(index)
}
public clear() {
this.dataList = []
this.notifyDataReload()
}
}