1# ArkUI Subsystem Changelog
2
3## cl.arkui.1 undefined and null Value Support for State Variables
4
5**Change Impact**
6
7API 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.
8
9API version 10: State variables accept **undefined** and **null** as values. You need to check whether a state variable is **undefined**.
10
11**Adaptation Guide**
12
13Since API version 10, you need to take measures to check whether a state variable is **undefined**.
14```ts
15@Entry
16@Component
17struct Page3 {
18  @State messages: string[] = ['Hello World']
19
20  aboutToAppear() {
21    // If AppStorage does not contain the specified key, undefined is returned.
22    // API version 9: The ArkUI framework rejects undefined as the assigned value, and this.messages is still at its initial value ['Hello World'].
23    // API version 10: The ArkUI framework accepts undefined as the assigned value, and this.messages is undefined.
24    this.messages = AppStorage.Get("aProp")
25  }
26
27  build() {
28    Row() {
29      Column() {
30        // API version 9: The application does not crash, and the value of length is 1.
31        // API version 10: The application crashes, and the following error message is displayed: Cannot read property length of undefined.
32        Text(`the messages length: ${this.messages.length}`)
33          .fontSize(50)
34          .fontWeight(FontWeight.Bold)
35      }
36      .width('100%')
37    }
38    .height('100%')
39  }
40}
41```
42
43In the preceding scenario, each time **undefined** or **null** is assigned to a state variable, a check for **undefined** state variables is required.
44
45```ts
46Text(`the messages length: ${this.messages?.length}`)
47```
48
49In 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:
501. @Link initialization from the parent component
51
52   In the following example, a runtime error is reported, prompting you to initialize @Link.
53   ```ts
54   @Entry
55   @Component
56   struct Page3 {
57     @State aProp: boolean = true
58
59     build() {
60       Row() {
61         Column() {
62           // crash: SynchedPropertyObjectTwoWayPU[9, 'linkProp']: constructor @Link/@Consume source variable in
63           // parent/ancestor @Component must be defined. Application error!
64           LinkChild()
65           // Incorrect: linkProp is initialized from a regular variable. In this case, the ArkUI framework considers linkProp as not initialized and reports an error.
66           LinkChild({ aProp: false })
67           // Correct: @Link is initialized from the state variable this.aProp.
68           LinkChild({ aProp: this.aProp })
69         }
70         .width('100%')
71       }
72       .height('100%')
73     }
74   }
75
76   @Component
77   struct LinkChild {
78     @Link aProp: boolean
79
80     build() {
81       Text(`linkProp: ${this.aProp}`)
82         .fontSize(50)
83         .fontWeight(FontWeight.Bold)
84     }
85   }
86   ```
87
882. Value type support of state variables
89
90   If a state variable is assigned a value in an unsupported type, for example, function, a runtime error is reported.
91   ```ts
92   @Entry
93   @Component
94   struct Page3 {
95     // API version 10: A runtime error is reported: @Component 'Page3': Illegal variable value error with decorated variable @State/@Provide 'functionProp': failed
96     // validation: 'undefined, null, number, boolean, string, or Object but not function, attempt to assign value type: 'function',
97     @State functionProp: () => void = () => {
98       console.info("123")
99     }
100
101     aboutToAppear() {
102       this.functionProp()
103     }
104
105     build() {
106       Row() {
107         Column() {
108           Text("hello")
109         }
110         .width('100%')
111       }
112       .height('100%')
113     }
114   }
115   ```
116
117## cl.arkui.2 Adaptation to Component Exceptions After Updating to SDK 4.0.10.x
118After 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.
119
120**Example**
121
122```
123@Entry
124@Component
125struct Index { // Custom component
126  build() {
127    Text('Hello, world') // Basic component
128  }
129}
130```
131
132**Change Impact**
133
134If 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".
135
136**Key API/Component Changes**
137
138N/A
139
140**Adaptation Guide**
141
142Use the matching image on the device.
143