HarmonyOS 自定义组件，数据更新时，界面无法重新渲染

@Component
export struct CardView {
  @State title: string | undefined = undefined
  @State moreText: string = '更多'

  @Builder
  tempBuilder() {
  };

  @BuilderParam contentBuilder: () => void = this.tempBuilder

  build() {
    this.contentBuilder()
  }
}

//组件被调用

@Component
export struct NoticeCardView {
  @State noticeList: Notice[] = []

  aboutToAppear(): void {
    new NoticeRepository().getNoticeList().then((result) => {
      this.noticeList = result
    })
  }

  @Builder
  ContentBuilder() {
    ForEach(this.noticeList, (notice: Notice) => {
      Row() {
        Image($r('app.media.wb_ic_notice_tip')).height(11).width(9)
        Text(notice.title)
          .margin({ left: 11 })
          .fontColor($r('app.color.cm_text_primary'))
          .fontSize('14fp')
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
      }.padding(8)
    })
  }

  build() {
    CardView({
      title: '',
      contentBuilder: this.ContentBuilder
    })
  }
}

自定义组件noticeList更新时，无法触发界面更新，无法渲染出列表展示

HarmonyOS

Heiang

2024-12-20 17:03:08

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

参考以下代码：

@Component
struct CardView  {
  @Prop header: string = '';
  @Builder tempBuilder(){}

  @BuilderParam contentBuilder: () => void = this.tempBuilder
  build() {
    Column() {
      this.contentBuilder()
    }
  }
}
@Entry
@Component
struct CustomContainerUser {
  @State text: string = 'header';
  @State list: string[] = []
  aboutToAppear(): void {
    this.list.push("1");
    this.list.push("2");
    this.list.push("3");
    console.log('&#25171;&#21360;&#19968;&#19979;',this.list)

  }
  build() {
    Column() {
      Text(this.text)
      CardView ({ header: this.text }) {
        Column() {
          this.ContentBuilder('testA', 'testB')
        }.backgroundColor(Color.Yellow)
      }
    }

  }
  @Builder  ContentBuilder(label1: string, label2: string) {
    Column() {
      Text('test')
      ForEach(this.list, (text: string) => {
        Text(text)
      })
    }
  }
}