HarmonyOS 鸿蒙Next 预览器中都正常,但加载到模拟器中数字都变成NaN

HarmonyOS 鸿蒙Next 预览器中都正常,但加载到模拟器中数字都变成NaN

问题描述

在预览器previewer中都正确,但投放模拟器hvm中数字都变成了NaN。可是IDE中也没有地方显示报错,只是有一则ArkTS警告信息。

下面我们通过一个实例演示这个效果。该实例来源于B站:黑马程序员出品的课程——《P18 17.ArkUI-状态管理-@Observed和@ObjectLink》。

IDE相关截图

PreviewerLog警告信息

[Compile Result] ArkTS:WARN File: x:/.../xxxxxxx.etx:133:39

[Compile Result]  The regular property 'taskItem' cannot be assigned to the @ObjectLink property 'item'.

预览器操作Gif

devecostudio64_plepMRmJBi.gif

模拟器操作Gif

Emulator_0gjZCMmptq.gif

关于此问题,我的疑问

对于这则警告信息,我有个疑问。对于foreach的第二个参数(页面组件生成函数(taskItem: Task, index) => {...})的第一个参数item,我已经指定了他的类型为Task。那么,为什么IDE不认识?依旧认为它是一个常规属性的变量。

示例代码

@Observed
class Task {
    static id: number = 1
    // 任务名称
    name: string = `任务${Task.id++}`
    // 任务状态:是否完成
    finished: boolean = false
}

// 统一卡片样式
@Styles function filling_Cards() {
    .width('95%')
    .padding(20)
    .backgroundColor(Color.White)
    .borderRadius(15)
    .shadow({
        radius: 6,
        color: '#1F000000',
        offsetX: 2,
        offsetY: 4
    })
}

// 统一完成样式
@Extend(Text) function finished_Task() {
    .decoration({ type: TextDecorationType.LineThrough })
    .fontColor('#B1B2B1')
}

class Statistics_Info {
    // 总任务数量
    totalTask: number = 0
    // 已完成的任务数量
    finishedTask: number = 0
}

@Entry
@Component
struct Prop_Decorator {
    @Provide statistics: Statistics_Info = new Statistics_Info()

    build() {
        Column({ space: 10 }) {
            // 1. 任务进度卡片
            Task_Statistics()

            // 2. 新增任务的按钮
            // 3. 任务列表
            Task_List()
        }
        .width('100%')
        .height('100%')
        .backgroundColor('#F1F2F3')
    }
}

@Component
struct Task_Statistics {
    @Consume statistics: Statistics_Info

    build() {
        Row() {
            Text('任务进度:')
                .fontSize(30)
                .fontWeight(FontWeight.Bold)

            // Stack——堆叠容器
            Stack() {
                Progress({
                    value: this.statistics.finishedTask,
                    total: this.statistics.totalTask,
                    type: ProgressType.Ring
                })
                    .width(100)

                Row() {
                    Text(this.statistics.finishedTask.toString())
                        .fontSize(24)
                        .fontColor('#F36D')

                    Text(' / ' + this.statistics.totalTask.toString())
                        .fontSize(24)
                }
            }
        }
        .filling_Cards()
        .margin({ top: 20, bottom: 10 })
        .justifyContent(FlexAlign.SpaceEvenly)
    }
}

@Component
struct Task_List {
    @Consume statistics: Statistics_Info
    // 任务数组
    @State tasks: Task[] = []

    // 处理finishedTask和totalTask变量的更新操作
    handleTaskChange(val: number) {
        if (val == 1) {
            // 修改任务总数计数器——通过测量数组长度精确判定
            this.statistics.totalTask = this.tasks.length
        } else if (val == 2) {
            // 更新已完成任务计数器的值
            this.statistics.finishedTask = this.tasks.filter(item => item.finished)
                .length
        } else {
            this.statistics.totalTask = this.tasks.length
            this.statistics.finishedTask = this.tasks.filter(item => item.finished)
                .length
        }
    }

    build() {
        Column() {
            Button('新增任务')
                .onClick(() => {
                    // 向任务数组新增数组元素
                    this.tasks.push(new Task())

                    // 修改任务总数计数器
                    this.handleTaskChange(1)
                })
                .width(200)

            List({ space: 10 }) {
                ForEach(
                    this.tasks,
                    (item: Task, index) => {
                        ListItem() {
                            Task_Item({
                                item: item,
                                onTaskChange: this.handleTaskChange.bind(this)
                            })
                        }
                        .swipeAction({ end: this.deleteButton(index) })
                    }
                )
            }
            .width('100%')
            .alignListItem(ListItemAlign.Center)
            .layoutWeight(1)
        }
    }

    @Builder
    deleteButton(index: number) {
        Button() {
            Image($r('app.media.ic_public_delete_filled'))
                .fillColor(Color.White)
                .width(25)
        }
        .margin({ left: 5 })
        .padding(10)
        .type(ButtonType.Circle)
        .backgroundColor(Color.Red)
        .onClick(() => {
            this.tasks.splice(index, 1)
            this.handleTaskChange(3)
        })
    }
}

@Component
struct Task_Item {
    @ObjectLink item: Task
    onTaskChange: (val) => void

    build() {
        Row() {
            if (this.item.finished) {
                Text(this.item.name)
                    .finished_Task()
            } else {
                Text(this.item.name)
            }

            Checkbox()
                .select(this.item.finished)
                .onChange(val => {
                    // 更新当前任务的状态
                    this.item.finished = val

                    // 更新已完成任务计数器的值
                    this.onTaskChange(3)
                })
        }
        .filling_Cards()
        .justifyContent(FlexAlign.SpaceBetween)
    }
}

更多关于HarmonyOS 鸿蒙Next 预览器中都正常,但加载到模拟器中数字都变成NaN的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

开发者您好,建议升级一下最新的版本试试。

更多关于HarmonyOS 鸿蒙Next 预览器中都正常,但加载到模拟器中数字都变成NaN的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,预览器中显示正常但加载到模拟器中数字变成NaN的问题,可能是由于数据类型或数据绑定方式在模拟器环境中未正确处理。检查以下几点:

  1. 数据绑定:确保数据绑定正确,特别是涉及数字类型的数据。模拟器可能对数据绑定的处理方式与预览器不同。

  2. 数据类型:确认数据在传输过程中未被意外转换为字符串或其他类型。NaN通常表示非数字值,可能是数据类型转换错误。

  3. 模拟器环境:模拟器可能与预览器使用不同的运行时环境或配置,导致数据处理不一致。检查模拟器的配置是否与预览器一致。

  4. 日志输出:查看运行日志,确认是否有错误或警告信息,可能有助定位问题。

  5. 版本差异:确保预览器和模拟器使用相同版本的鸿蒙Next,版本差异可能导致行为不一致。

通过以上步骤排查,可定位并解决数字显示为NaN的问题。

回到顶部