HarmonyOS 鸿蒙Next @State使用问题

发布于 1周前 作者 vueper 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next @State使用问题

setTimeout模拟调用接口,@State定义的数据重新赋值后,页面无变化。怎么实现呢 因为布局相似 featureItemlayout共用

export struct TextPage {
  [@State](/user/State) name: string = '' //姓名
  [@State](/user/State) licenseNum: string = '' //车牌号
  [@State](/user/State) brandModel: string = '' //品牌型号
  [@State](/user/State) vin: string = '' //车架号
  [@State](/user/State) engineNum: string = '' //发动机号
  [@State](/user/State) type: string = '' //车辆类型

  aboutToAppear(): void {

    //模拟调用接口
    setTimeout(()=>{
      this.name = 'name'
      this.licenseNum = 'rsp.data.encryLicenseNo' //车牌号
      this.brandModel = 'rsp.data.model' //品牌型号
      this.vin = 'rsp.data.encryIdNo '//车架号
      this.engineNum = 'rsp.data.engineNo' //发动机号
      this.type = 'rsp.data.carType' //车辆类型
    },500)
  }

  //输入控件
  @Builder
  featureItemlayout(title: string, placeholder: string,inputData: string) {
    Row() {
      Text(title).fontColor($r('app.color._333333'))
        .fontSize($r('app.float.fp_16'))

      TextInput({
        placeholder: placeholder,
        text:inputData
      })
        .placeholderColor($r('app.color._999999'))
        .fontSize(16)
        .fontColor($r('app.color._333333'))
        .maxLines(1)
        .layoutWeight(1)
        .height(48)
        .defaultFocus(false)
        .textAlign(TextAlign.End)
        .backgroundColor($r('app.color.transparent'))
        .type(title == '座位人数'?InputType.Number:InputType.Normal)
        .padding(0)
        .borderRadius(0)
        .onChange(item => {
          if (title == '姓名') {
            this.name = item
          } else if (title == '车牌号') {
            this.licenseNum = item
          } else if (title == '品牌型号') {
            this.brandModel = item
          } else if (title == '车架号') {
            this.vin = item
          } else if (title == '发动机号') {
            this.engineNum = item
          }
        })
    }
    .width('100%')
    .height(50)
  }

  @Builder
  layout(){
    Column(){
      this.featureItemlayout('车牌号', '请输入车牌号',this.licenseNum)
      Divider().height(0.5).color($r('app.color._e5e5e5'))
      this.featureItemlayout('姓名', '请输入姓名',this.name)
      Divider().height(0.5).color($r('app.color._e5e5e5'))
      this.featureItemlayout('品牌型号', '请输入品牌型号',this.brandModel)
      Divider().height(0.5).color($r('app.color._e5e5e5'))
      this.featureItemlayout('车架号', '请输入车架号',this.vin)
      Divider().height(0.5).color($r('app.color._e5e5e5'))
      this.featureItemlayout('发动机号', '请输入发动机号',this.engineNum)

    }.backgroundColor($r('app.color.white'))
    .borderRadius(8)
    .padding({left:12,right:12})
  }

  build() {
    Column(){
      this.layout()
    }
  }
}

更多关于HarmonyOS 鸿蒙Next @State使用问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复
深色代码主题
复制
[@Entry](/user/Entry)
[@Component](/user/Component)
export struct TextPage {
  [@State](/user/State) name: string = '' //姓名
  [@State](/user/State) licenseNum: string = '' //车牌号
  [@State](/user/State) brandModel: string = '' //品牌型号
  [@State](/user/State) vin: string = '' //车架号
  [@State](/user/State) engineNum: string = '' //发动机号
  [@State](/user/State) type: string = '' //车辆类型

aboutToAppear(): void {

<span class="hljs-comment">//模拟调用接口</span>
setTimeout(() =&gt; {
  <span class="hljs-keyword">this</span>.name = <span class="hljs-string">'name'</span>
  <span class="hljs-keyword">this</span>.licenseNum = <span class="hljs-string">'rsp.data.encryLicenseNo'</span> <span class="hljs-comment">//车牌号</span>
  <span class="hljs-keyword">this</span>.brandModel = <span class="hljs-string">'rsp.data.model'</span> <span class="hljs-comment">//品牌型号</span>
  <span class="hljs-keyword">this</span>.vin = <span class="hljs-string">'rsp.data.encryIdNo '</span> <span class="hljs-comment">//车架号</span>
  <span class="hljs-keyword">this</span>.engineNum = <span class="hljs-string">'rsp.data.engineNo'</span> <span class="hljs-comment">//发动机号</span>
  <span class="hljs-keyword">this</span>.type = <span class="hljs-string">'rsp.data.carType'</span> <span class="hljs-comment">//车辆类型</span>
}, <span class="hljs-number">500</span>)

}

//输入控件 @Builder featureItemlayout(item: Item) { Row() { Text(item.title) TextInput({ placeholder: item.placeholder, text: item.inputData })

    .fontSize(<span class="hljs-number">16</span>)

    .maxLines(<span class="hljs-number">1</span>)
    .layoutWeight(<span class="hljs-number">1</span>)
    .height(<span class="hljs-number">48</span>)
    .defaultFocus(<span class="hljs-literal">false</span>)
    .textAlign(TextAlign.End)

    .padding(<span class="hljs-number">0</span>)
    .borderRadius(<span class="hljs-number">0</span>)
    .onChange(text =&gt; {
      <span class="hljs-keyword">if</span> (item.title == <span class="hljs-string">'姓名'</span>) {
        <span class="hljs-keyword">this</span>.name = text
      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (item.title == <span class="hljs-string">'车牌号'</span>) {
        <span class="hljs-keyword">this</span>.licenseNum = text
      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (item.title == <span class="hljs-string">'品牌型号'</span>) {
        <span class="hljs-keyword">this</span>.brandModel = text
      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (item.title == <span class="hljs-string">'车架号'</span>) {
        <span class="hljs-keyword">this</span>.vin = text
      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (item.title == <span class="hljs-string">'发动机号'</span>) {
        <span class="hljs-keyword">this</span>.engineNum = text
      }
    })
}
.width(<span class="hljs-string">'100%'</span>)
.height(<span class="hljs-number">50</span>)

}

@Builder layout() { Column() { this.featureItemlayout({ title: ‘车牌号’, placeholder: ‘请输入车牌号’, inputData: this.licenseNum }) Divider().height(0.5) this.featureItemlayout({title: ‘姓名’,placeholder: ‘请输入姓名’, inputData: this.name}) Divider().height(0.5) this.featureItemlayout({title: ‘品牌型号’, placeholder:‘请输入品牌型号’,inputData: this.brandModel}) Divider().height(0.5) this.featureItemlayout({title: ‘车架号’, placeholder: ‘请输入车架号’,inputData: this.vin}) Divider().height(0.5) this.featureItemlayout({title: ‘发动机号’, placeholder:‘请输入发动机号’,inputData: this.engineNum})

}
.borderRadius(<span class="hljs-number">8</span>)
.padding({ left: <span class="hljs-number">12</span>, right: <span class="hljs-number">12</span> })

}

build() { Column() { this.layout() } } }

class Item { title: string = ‘’ placeholder: string = ‘’ inputData: string = ‘’ }

更多关于HarmonyOS 鸿蒙Next @State使用问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


  • 当状态变量被改变时,查询依赖该状态变量的组件;

  • 执行依赖该状态变量的组件的更新方法,组件更新渲染;

  • 和该状态变量不相关的组件或者UI描述不会发生重新渲染,从而实现页面渲染的按需更新。

你这种写法 [@State](/user/State)修饰的变量 并没有绑定UI

在HarmonyOS(鸿蒙)开发中,@State 是用于声明组件状态的装饰器。它允许你在组件中存储可变的数据,并且当这些数据发生变化时,组件会自动重新渲染以反映这些变化。

如果你在使用 @State 时遇到问题,可能是以下几个原因:

  1. 状态数据类型不匹配:确保你使用 @State 装饰的变量类型与你在模板或逻辑中使用的类型一致。

  2. 状态更新方式不正确:在鸿蒙中,状态的更新应该通过组件的方法或事件处理器来进行,而不是直接修改状态变量。

  3. 状态变量未正确初始化:在声明状态变量时,确保你已经为其提供了初始值。

  4. 组件生命周期问题:有时状态更新可能因组件的生命周期状态(如已卸载)而被忽略。确保在组件仍然有效时更新状态。

  5. 模板绑定问题:检查你的模板是否正确绑定了状态变量。如果绑定有误,状态变化可能不会反映到视图上。

如果以上检查均无误,但问题依旧存在,可能是由于更复杂的逻辑错误或框架的特定行为导致的。此时,你可以通过查阅官方文档或搜索相关开发社区来获取更多信息。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部