HarmonyOS 鸿蒙Next 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', 'HUAWEI nova 12'),
    new ProductInfo( '2', 'HUAWEI nova 11'),
    new ProductInfo( '3', 'HUAWEI nova 13'),
    new ProductInfo( '24', 'HUAWEI nova 14'),

  ];
  @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)
            }
          }
        }
      })
    }
  }
}