HarmonyOS @State标注的二维数组，当元素变更后，选中状态ui未更新

如标题，存在当前数组。

@State saleAttrVOList: Array<Array<GoodsSpecAttrBean>> = []

元素中存在选中或未选中，通过用户点击更新相关字段，ui未更新。

更新代码如下：

updateSku(ruleBid:string) {  
    let list = this.saleAttrVOList  
    for (let index = 0; index < list.length; index++) {  
      const elements = list[index];  
      for (let index = 0; index < elements.length; index++) {  
        const element = elements[index];  
        element.isSelected = element.ruleBid === ruleBid  
        if(element.isSelected === true) {  
          this.ruleName = element.ruleValue??''  
        }  
      }  
    }  
    this.saleAttrVOList = list  
  
    let goodsAttrBean = this.goodsAttributeVOList.find((attrBean:GoodsAttrBean) => {  
      return attrBean.ruleBidList === ruleBid  
    })  
    if(goodsAttrBean) {  
      this.salePrice = goodsAttrBean.salePrice??'0'  
    }  
  }

HarmonyOS

zbw_apple

2024-10-25 11:35:36

浏览

已于2024-10-25 11:36:03修改

回答 1

待解决

回答 1

按赞同

按时间

superinsect

可以尝试使用@ObjectLink和@Observed类装饰器，@Observed修饰class，然后再通过@State修饰数组

具体可参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5#概述

具体可参考如下：

@Observed  
class GoodsSpecAtteBean {  
  public textInfo: string  
  public isSelect: boolean  
  
  constructor(textInfo: string, isSelect: boolean) {  
    this.textInfo = textInfo  
    this.isSelect = isSelect  
  }  
}  
  
@Observed  
class GoodsSpecAtteBeanArrays extends Array<GoodsSpecAtteBean> {  
  constructor(args: GoodsSpecAtteBean) {  
    super(args)  
  }  
}  
  
@Component  
struct ItemPage {  
  @ObjectLink itemArr: GoodsSpecAtteBeanArrays;  
  
  build() {  
    Column() {  
      Grid() {  
        ForEach(this.itemArr, (item: GoodsSpecAtteBean, index: number) => {  
          GridItem() {  
            TextContent({ item: item })  
          }  
        })  
      }  
    }  
    .height(100)  
  }  
}  
  
@Component  
struct TextContent {  
  @ObjectLink item: GoodsSpecAtteBean  
  
  build() {  
    Column() {  
      Text(this.item.textInfo)  
        .textAlign(TextAlign.Center)  
        .padding(8)  
        .borderRadius(8)  
        .fontColor(this.item.isSelect ? Color.Red : Color.Blue)  
        .backgroundColor(this.item.isSelect ? Color.Blue : Color.White)  
    }  
  }  
}  
  
@Entry  
@Component  
struct IndexPage {  
  @State arr: GoodsSpecAtteBeanArrays[] =  
    [  
      new GoodsSpecAtteBeanArrays(new GoodsSpecAtteBean("hello1", true)),  
      new GoodsSpecAtteBeanArrays(new GoodsSpecAtteBean("hello2", false)),  
      new GoodsSpecAtteBeanArrays(new GoodsSpecAtteBean("hello3", false))  
    ];  
  
  build() {  
    Column() {  
      ForEach(this.arr, (itemArr: GoodsSpecAtteBeanArrays, index: number) => {  
        ItemPage({ itemArr: itemArr })  
          .onClick(() => {  
            for (let i = 0; i < this.arr.length; i++) {  
              if (index === i) {  
                this.arr[i][0].isSelect = true  
              } else {  
                this.arr[i][0].isSelect = false  
              }  
            }  
          })  
      })  
    }  
    .width('100%')  
    .height('100%')  
    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))  
  }  
}

2024-10-25 15:28:19

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS @State标注的二维数组，当元素变更后，选中状态ui未更新

订阅鸿蒙技术特刊，精选内容抢先看