HarmonyOS Grid组件使用ForEach网格布局，Ui数据更新问题

class ProductInfo{ 
  public   id:string 
  public   productName:string 
  constructor( id:string,productName:string) { 
    this.id = id 
    this.productName = productName 
  } 
} 
@Entry 
@Component 
struct GridHighLight { 
  @State services: ProductInfo[] =  [ 
    new ProductInfo( '1',  'String1'), 
    new ProductInfo( '2',  'String2'), 
    new ProductInfo( '3',  'String3'), 
    new ProductInfo( '4',  'String4'), 
 
  ]; 
  @State clickStatus:Boolean = false 
  clickThings: Array<string> = [] 
  @Provide selectIndexList: Array<string> = [] 
 
 
  build() { 
    Column() { 
      Grid() { 
        ForEach(this.services, (item: ProductInfo, index) => { 
          GridItem() { 
            ToDoItem({ content: item.productName,selectIndex: item.id }) 
          } 
        }, (item: string): string => item) 
      } 
      .columnsTemplate('1fr 1fr 1fr') 
      .columnsGap(10) 
      .rowsGap(10) 
      .width('90%') 
      .backgroundColor(0xFAEEE0) 
      .height(300) 
      Text('选中的') 
      Text(`${this.selectIndexList}`) 
 
    } 
  } 
} 
@Component 
export default struct ToDoItem { 
  private content?: string; 
  @State isComplete: boolean = false; 
  private selectIndex?:string; 
  @Consume selectIndexList: Array<string> 
 
  build() { 
    Row() { 
      Column() { 
        Text(this.content).fontColor('#FFFFFF') 
      } 
      .width('30%') 
      .height(100) 
      .backgroundColor(this.isComplete ? Color.Red : Color.Blue) 
      .justifyContent(FlexAlign.Center) 
      .width('100%') 
      .height(60) 
      .onClick(() => { 
        this.isComplete = !this.isComplete; 
        if(this.selectIndex){ 
          if(this.isComplete){ 
            this.selectIndexList.push(this.selectIndex) 
          }else{ 
            let index =  this.selectIndexList.indexOf(this.selectIndex) 
            if(index !== -1){ 
              this.selectIndexList.splice(index,1) 
            } 
          } 
        } 
      }) 
    } 
  } 
}