HarmonyOS 鸿蒙Next ArkUI中的if 渲染控制
HarmonyOS 鸿蒙Next ArkUI中的if 渲染控制
代码如下：
@Entry
@Component
struct PlayGround {
@State people:People = undefined
build(){
Column () {
if(this.people){
Text(`${this.people.name} ${this.people.age}`)
if(this.people.address){
Text(`${this.people.address.name} ${this.people.address.zipCode}`)
}
}
Button('创建').onClick(()=>{
let tmpPeople = new People()
let tmpAddress = new Address()
tmpAddress.name = '测试地址'
tmpAddress.zipCode = -1000
tmpPeople.address = tmpAddress
tmpPeople.age = 10
tmpPeople.name = '测试'
this.people = tmpPeople
})
Button('删除地址').onClick(()=>{
if(this.people){
this.people.address = undefined
}
})
}.margin({top:48})
}
}
class Address{
zipCode:number
name:string
}
class People{
name:string
age:number
address:Address
}
定义了一个Address类，定义了一个People类，在People中有一个Address变量。
当我运行应用时，页面上什么都没有显示，因为people是 undefined. 说明if渲染控制生效
当我点击页面创建按钮时，people对象被赋值，页面上显示相关信息。
当我点击页面删除按钮时，将people对象的address字段设置为undefined，应用崩溃，日志如下
Device info:OpenHarmony 3.2
Build info:OpenHarmony 3.2.9.1
Module name:com.huangyuanlove.arkui_demo
Version:1.0.0
Pid:32609
Uid:20040004
Lifetime: 0.000000s
Js-Engine: ark
page: pages/PlayGround.js
Error message: Cannot read property name of undefined
SourceCode:
Text.create(`${this.people.address.name} ${this.people.address.zipCode}`);
^
Stacktrace:
at anonymous (/ets/pages/PlayGround.ets:13:19)
有疑问的是：已经对变量进行了判空设置，为什么还能进入渲染组件的逻辑？ 可否详细说明一下if渲染流程？我应该如何修改代码才能正常运行？
更多关于HarmonyOS 鸿蒙Next ArkUI中的if 渲染控制的实战教程也可以访问 https://www.itying.com/category-93-b0.html
- 文档上有写是禁止用undefined初始化的。
- 重新渲染的条件我在文档上看，只是单指与变量依赖的组件才能主动重新渲染。
更多关于HarmonyOS 鸿蒙Next ArkUI中的if 渲染控制的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
我确实忽略了这一点。
但即使 @State people:People = new People() 也是一样的崩溃。不大清楚这里的简单类型和复杂联合类型是指什么。
我写了一个 string 类型的测试，初次运行页面显示info is empty，点击设置值页面刷新，展示内容也符合预期，但这时候点击删除值，将 info 设置为 undefined，应用会崩溃
@State info: string = ''
build() {
Column(){
if(this.info){
Text(`info : ${this.info} , length: ${this.info.length}`)
} else {
Text("info is empty")
}
Button("设置值").onClick(() => {
this.info = '123456789'
}).margin(10)
Button("删除值").onClick(() => {
this.info = undefined
})
}
}
我错了，对于 State 用法错误。
但是在除了 State 装饰器外，其他用于状态管理的也是同样的原因，不支持 undefined 和 null，甚至对象内部的属性也不能是 undefined 和 null。
取自定义对象属性的时候可以使用 ?. 来规避这个问题。
多谢，解决了我的疑惑，
我在people类中新增了一个判断address字段是否为空的方法
class People{
name:string
age:number
address:Address
showAddress():boolean{
if(this.address){
return true
}else{
return false
}
}
}
并将渲染控制语句修改为
if(this.people){
Text(`${this.people.name} ${this.people.age}`)
if(this.people.showAddress()){
Text(`${this.people.address.name} ${this.people.address.zipCode}`)
}
}
同样也会崩溃，同样的崩溃原因
Button(‘重新赋值’).onClick(()=>{
let tmpPeople = new People()
tmpPeople.age = 11
tmpPeople.name = '测试01'
this.people = tmpPeople
})
即使是将people重新赋值一个新对象(不设置address字段的值)，同样也会崩溃。
对条件渲染控制的流程感到疑惑。。。？？？？
