HarmonyOS 鸿蒙Next @Prop修饰器 父组件单向传值给子组件问题 父组件参数值变化了但子组件值不变化

HarmonyOS 鸿蒙Next @Prop修饰器 父组件单向传值给子组件问题 父组件参数值变化了但子组件值不变化

class Task{ static id:number = 1 name:string = 任务${Task.id++} finished:boolean = false }

@Styles function card(){ .width(‘95%’) .padding(20) .backgroundColor(Color.White) .borderRadius(15) .shadow({radius:6,color:’#1f000000’,offsetX:2,offsetY:6}) } @Extend(Text) function finishedTask(){ .decoration({type:TextDecorationType.LineThrough}) .fontColor(’#b1b2b1’) }

@Entry @Component struct PropPage { @State tatolTask:number = 0 @State finishTask:number = 0 @State tasks:Task[]=[]

handelTaskChange(){ //更新任务总数 this.tatolTask = this.tasks.length //已完成数量变更 this.finishTask = this.tasks.filter(item =>item.finished).length } build() { Column(){ TaskStatistics({finishedNum:this.finishTask, totalTask:this.finishTask})

  Button('添加任务',{type:ButtonType.Normal,stateEffect:true})
    .width(150)
    .fontSize(16)
    .fontColor('#563dcf')
    .backgroundColor('#ededed')
    .onClick(=>{
      this.tasks.push(new Task())
      this.handelTaskChange()
    })
  List({space:10}){
    ForEach(this.tasks,
      (item:Task,index)=>{
        ListItem(){
          Row(){
            if (item.finished) {
              Text(item.name)
                .fontColor('#222222')
                .fontSize(20)
                .finishedTask
            } else {
              Text(item.name)
                .fontColor('#222222')
                .fontSize(20)
            }

            Blank()
            Checkbox()
              .select(item.finished)
              .onChange(val=>{
                item.finished = val
                this.handelTaskChange()
              })
          }
          .card()
        }
        .swipeAction({end:this.DelBtn(index)})
      }
    )
  }
  .width('100%')
  .layoutWeight(1)
  .alignListItem(ListItemAlign.Center)
}
.width('100%')
.height('100%')
.backgroundColor('#f1f2f3')

} @Builder DelBtn(index:number){ Button(‘del’) .fontSize(16) .onClick(=>{ this.tasks.splice(index,1) this.handelTaskChange() }) } }

@Component struct TaskStatistics{ @Prop finishedNum:number @Prop totalTask:number build(){ Row(){ Text(‘任务进度’) .fontSize(30) .fontWeight(FontWeight.Bold)

  Stack(){
    Progress({
      value:this.finishedNum,
      total:this.totalTask,
      type:ProgressType.Ring
    })
      .width(100)
    Row(){
      Text(this.finishedNum.toString())
        .fontSize(24)
        .fontColor('#36d')
      Text('/'+this.totalTask.toString())
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
    }
  }
}
.card()
.margin({top:20,bottom:20})
.justifyContent(FlexAlign.SpaceEvenly)

} } 代码如上，不知道是为什么单向传值不行，有谁知道什么原因么？


更多关于HarmonyOS 鸿蒙Next @Prop修饰器 父组件单向传值给子组件问题 父组件参数值变化了但子组件值不变化的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

你的 TaskStatistics({ finishedNum: this.finishTask, totalTask: this.finishTask}) 这个写错了吧
totalTask: this.totalTask吧?

更多关于HarmonyOS 鸿蒙Next @Prop修饰器 父组件单向传值给子组件问题 父组件参数值变化了但子组件值不变化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


啊我沙比了 没注意看到这个，谢谢了啊，

在HarmonyOS鸿蒙Next中，@Prop修饰器用于父组件向子组件单向传递数据。当父组件的参数值发生变化时，子组件的@Prop属性应当同步更新。如果子组件的值没有变化，可能是以下原因之一：

  1. 父组件的状态未正确更新：确保父组件的状态变化是通过@State或@Link等修饰器管理的，且状态更新逻辑正确。

  2. 子组件的@Prop属性未正确绑定：检查子组件的@Prop属性是否正确绑定到父组件的状态变量。确保绑定表达式正确无误。

  3. 组件生命周期问题：如果父组件的状态更新发生在子组件已经渲染完成后，子组件可能不会自动更新。可以尝试在父组件中手动触发子组件的更新逻辑。

  4. 状态传递的层次问题：如果父组件和子组件之间存在多层嵌套，确保状态传递的每一层都正确绑定了@Prop属性。

  5. 调试与日志：通过日志输出检查父组件状态的变化是否传递到了子组件，排查可能的逻辑错误。

如果以上问题均已排除，子组件的@Prop属性仍不更新，建议检查HarmonyOS SDK版本，确保使用的是最新版本，避免已知的框架问题。

回到顶部