ArkUI Subsystem Changelog

cl.arkui.1 undefined and null Value Support for State Variables

Change Impact

API version 9: State variables do not accept undefined or null as values. If a state variable is set to undefined or null, it will remain at its original value.

API version 10: State variables accept undefined and null as values. You need to check whether a state variable is undefined.

Adaptation Guide

Since API version 10, you need to take measures to check whether a state variable is undefined.

@Entry
@Component
struct Page3 {
  @State messages: string[] = ['Hello World']

  aboutToAppear() {
    // If AppStorage does not contain the specified key, undefined is returned.
    // API version 9: The ArkUI framework rejects undefined as the assigned value, and this.messages is still at its initial value ['Hello World'].
    // API version 10: The ArkUI framework accepts undefined as the assigned value, and this.messages is undefined.
    this.messages = AppStorage.Get("aProp")
  }

  build() {
    Row() {
      Column() {
        // API version 9: The application does not crash, and the value of length is 1.
        // API version 10: The application crashes, and the following error message is displayed: Cannot read property length of undefined.
        Text(`the messages length: ${this.messages.length}`)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

In the preceding scenario, each time undefined or null is assigned to a state variable, a check for undefined state variables is required.

Text(`the messages length: ${this.messages?.length}`)

In API version 10, the ArkUI framework verifies the initialization and value types of state variables, and reports errors found during running. Specifically, there are the following two cases:

1. @Link initialization from the parent component

   In the following example, a runtime error is reported, prompting you to initialize @Link.

   @Entry
   @Component
   struct Page3 {
     @State aProp: boolean = true
   
     build() {
       Row() {
         Column() {
           // crash: SynchedPropertyObjectTwoWayPU[9, 'linkProp']: constructor @Link/@Consume source variable in
           // parent/ancestor @Component must be defined. Application error!
           LinkChild()
           // Incorrect: linkProp is initialized from a regular variable. In this case, the ArkUI framework considers linkProp as not initialized and reports an error.
           LinkChild({ aProp: false })
           // Correct: @Link is initialized from the state variable this.aProp.
           LinkChild({ aProp: this.aProp })
         }
         .width('100%')
       }
       .height('100%')
     }
   }
   
   @Component
   struct LinkChild {
     @Link aProp: boolean
   
     build() {
       Text(`linkProp: ${this.aProp}`)
         .fontSize(50)
         .fontWeight(FontWeight.Bold)
     }
   }
   

2. Value type support of state variables

   If a state variable is assigned a value in an unsupported type, for example, function, a runtime error is reported.

   @Entry
   @Component
   struct Page3 {
     // API version 10: A runtime error is reported: @Component 'Page3': Illegal variable value error with decorated variable @State/@Provide 'functionProp': failed
     // validation: 'undefined, null, number, boolean, string, or Object but not function, attempt to assign value type: 'function', 
     @State functionProp: () => void = () => {
       console.info("123")
     }
   
     aboutToAppear() {
       this.functionProp()
     }
   
     build() {
       Row() {
         Column() {
           Text("hello")
         }
         .width('100%')
       }
       .height('100%')
     }
   }
   

cl.arkui.2 Adaptation to Component Exceptions After Updating to SDK 4.0.10.x

After the SDK is updated to 4.0.10.x, the UI components cannot be properly displayed if the device is not using the matching image version.

Example

@Entry
@Component
struct Index { // Custom component
  build() {
    Text('Hello, world') // Basic component
  }
}

Change Impact

If the device where your application runs is not using the matching image version, calling a UI component in the application code will cause the error message "this.observeComponentCreation2 is not callable".

Key API/Component Changes

N/A

Adaptation Guide

Use the matching image on the device.