HarmonyOS 鸿蒙Next 父组件向子组件传递数据,UI不更新

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 父组件向子组件传递数据,UI不更新

父组件中aboutToAppear 请求网络数据,数据如下,被@State 修饰
@State homePageBean: HomePageBean = new HomePageBean()

build() {
Scroll() {
Column() {
CoreArea({ isMain: true ,coreInfo:this.homePageBean.coreAreaArrayOne}).height(73).margin({ left: 20, right: 20, top: 6 })
CoreArea({ isMain: false ,coreInfo:this.homePageBean.coreAreaArrayTwo}).height(49).margin({ left: 20, right: 20, top: 12 })
}
}
}
CoreArea 中传递数据 homePageBean.coreAreaArrayOne

@Component
struct CoreArea {
@Prop marginTop: number;
@Prop isMain: boolean;
@Prop coreInfo: Array<CoreAreaInfo>
@State columnTemplate: string = ‘1fr 1fr 1fr 1fr 1fr’;
private controller: Scroller = new Scroller();

private itemsText: string[] = ['[https://xxx.png](https://xxx.png)', '[https://xxx.png](https://xxx.png)'];  

build() {  
    Grid(this.controller) {  
        ForEach(this.coreInfo, (item: CoreAreaInfo) => {  
            GridItem() {  
                Column() {  
                    Image(item.iconUrl).alt($r('app.media.icon_image_place_holder')).height(this.isMain ? 56 : 28).width('100%')  
                    Text("xxx")  
                    .fontSize(12)  
                    .fontColor($r('app.color.color_361C45'))  
                    .fontWeight(this.isMain ? 600 : 400)  
                    .margin({ top: 4 })  
                }  
            }  
        })  
    }  
    .columnsTemplate(this.columnTemplate)  
    .columnsGap(13)  
}  

}


更多关于HarmonyOS 鸿蒙Next 父组件向子组件传递数据,UI不更新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以将@State homePageBean: HomePageBean = new HomePageBean() 改为:

@State coreInfoOne: CoreAreaInfo[] = []
@State coreInfoTwo: CoreAreaInfo[] = []

在 aboutToAppear 请求网络数据,分别装在这两个数据

更多关于HarmonyOS 鸿蒙Next 父组件向子组件传递数据,UI不更新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


把 HomePageBean 类定义也给发出来吧,还有 aboutToAppear 生命周期的代码也发下

在HarmonyOS鸿蒙Next中,如果父组件向子组件传递数据后,UI没有更新,这通常是由于数据绑定或组件刷新机制未正确实现。以下是一些可能的原因及解决方案的简要概述:

  1. 数据绑定问题:

    • 确保父组件传递的数据是响应式的,即数据变化能够触发UI更新。
    • 检查子组件是否正确接收并使用了父组件传递的数据。
  2. 组件刷新问题:

    • 如果子组件是基于某种状态渲染的,确保在状态更新后,子组件能够重新渲染。
    • 检查是否有代码逻辑阻止了组件的正常刷新。
  3. 生命周期问题:

    • 确保在父组件数据更新后,子组件已经处于可接收新数据的生命周期阶段。
    • 有时需要在子组件的onAttachedonStateChanged等生命周期方法中处理数据更新。
  4. 异步更新问题:

    • 如果数据更新是异步的,确保在数据实际更新后再触发UI刷新。
    • 可以使用状态管理工具或观察者模式来确保数据更新的同步性。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部