HarmonyOS鸿蒙Next中@State状态声明的变量发生改变后,UI没有发生变化

HarmonyOS鸿蒙Next中@State状态声明的变量发生改变后,UI没有发生变化

import web_webview from '@ohos.web.webview'
import { TitleBar } from 'common'
@Entry
@Component
struct WebPage {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  showTitleBar: boolean = true
  isLocal: boolean = false
  [@State](/user/State) title: string = "加载中"
  URL: string = 'www.baidu.com';
  callback = {
    test: (data1, data2, data3) => {
      console.log("data1:" + data1)
      console.log("data2:" + data2)
      console.log("data3:" + data3)
      return "AceString"
    },
    toString: () => {
      console.log('toString' + "interface instead.")
    }
  }
  build() {
    Column() {
      if(this.showTitleBar){
        TitleBar({title:this.title})
      }
      Web({
        src: this.isLocal?$rawfile(this.URL):this.URL, 
        controller: this.controller 
      })
      .javaScriptAccess(true).zoomAccess(false).horizontalScrollBarAccess(false)
      .verticalScrollBarAccess(false)
      .onTitleReceive((event) => {
        this.title = event.title
      })
      .javaScriptProxy({
        object: this.callback,
        name: "ciyun",
        methodList: ["test", "toString"],
        controller: this.controller,
      })
    }
    .width('100%')
    .height('100%')
  }
}

上面代码我写了一个webview,自定义了一个titlebar,当网页加载完成后,回调onTitleReceive,给title赋值,debug发现赋值成功,但是Ui没有更新。请问是什么问题呢


更多关于HarmonyOS鸿蒙Next中@State状态声明的变量发生改变后,UI没有发生变化的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

@State装饰器的作用只是在当前组件中,而你把title传递给了自定义的子组件,所以你需要使用@Prop装饰器装饰子组件TitleBar中的title变量,这样可以与父组件中的@State title建立单向同步,当然也可以使用@Link建立双向同步!

更多关于HarmonyOS鸿蒙Next中@State状态声明的变量发生改变后,UI没有发生变化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


import netModel from “…/model/NetModel” import tokenModel from “…/model/TokenModel” import dataPreferencesModel from “…/model/DataPreferencesModel”

@Entry @Componentstruct Index { @State message: string = ‘Hello World’ @State cover: string = ‘https://img.tipsoon.com/front_cover/46d8a4fe9743863c9dae73bd3a8a483e.jpg

getNetData() { tokenModel.getToken(getContext()) netModel.httpRequestGet(“http://api.tipsoon.novsoft.cn:8080/api/v1/top/cover”, new Map<string, string>(), { onError(msg: string) { console.error(“wwwwwww_msg=” + msg) }, onSuccess(data: any) { console.error(“wwwwwww_data=” + data) this.cover = JSON.parse(data).data.cover.toString() console.error(“clickdddddd=change cover” + this.cover) } }) dataPreferencesModel.getPreferences(getContext(), (err, pre) => { pre.get(“token”, “”).then(data => { console.error(“prefre_get key=token,value=” + data) }) }) }

build() { Row() { Column() { Text(this.message) .fontSize(20) .fontWeight(FontWeight.Bold) .onClick(event => { console.error(“clickdddddd before cover=” + this.cover) this.cover = “https://img.tipsoon.com/front_cover/879674ada848ae9917497028f68ee5f1.jpg” this.message = “hahha” console.error(“clickdddddd”) }) Image(this.cover).width(300).height(300) } .width(‘100%’) } .height(‘100%’) }

onPageShow() { this.getNetData() } }

netModel.httpRequestGet接口回调中修改cover不会更新ui是怎么回事呢

在HarmonyOS鸿蒙Next中,@State状态声明的变量用于管理UI组件的状态。当@State变量发生改变时,UI应自动更新以反映新的状态。如果UI没有发生变化,可能的原因包括:

  • 状态变量未正确绑定到UI组件:确保@State变量已正确绑定到UI组件的属性或事件上。如果绑定不正确,UI不会响应状态变化。

  • 状态变量的更新未触发UI刷新:检查状态变量的更新是否在UI线程中执行。如果状态变量在非UI线程中更新,UI可能不会立即刷新。

  • 状态变量的更新未触发重新渲染:确保状态变量的更新触发了组件的重新渲染。如果组件的build方法未重新执行,UI不会更新。

  • 状态变量的更新未触发依赖更新:如果UI组件依赖于多个状态变量,确保所有相关状态变量的更新都触发了UI刷新。

  • 状态变量的更新未触发状态管理器的更新:检查状态管理器是否正确处理了状态变量的更新。如果状态管理器未正确处理,UI不会更新。

  • 状态变量的更新未触发UI组件的生命周期方法:确保状态变量的更新触发了UI组件的生命周期方法,如onStateUpdate,以确保UI正确更新。

  • 状态变量的更新未触发UI组件的重新布局:如果状态变量的更新影响了UI组件的布局,确保触发了重新布局,以确保UI正确更新。

  • 状态变量的更新未触发UI组件的重新绘制:如果状态变量的更新影响了UI组件的绘制,确保触发了重新绘制,以确保UI正确更新。

  • 状态变量的更新未触发UI组件的重新计算:如果状态变量的更新影响了UI组件的计算,确保触发了重新计算,以确保UI正确更新。

  • 状态变量的更新未触发UI组件的重新加载:如果状态变量的更新影响了UI组件的加载,确保触发了重新加载,以确保UI正确更新。

如果以上原因均排除,可能需要进一步检查代码逻辑或调试工具以确定问题所在。

在HarmonyOS鸿蒙Next中,如果使用@State声明的变量发生改变后,UI没有更新,可能的原因包括:

  1. 未正确绑定UI:确保@State变量与UI组件正确绑定,使用$符号进行双向绑定。
  2. 状态更新未触发:检查状态更新是否在UI线程中执行,确保使用this.xxx = newValue来更新状态。
  3. 组件未重新渲染:确认UI组件是否支持状态驱动的重新渲染,如TextButton等。
  4. 状态作用域问题:确保@State变量在正确的组件作用域内声明和使用。

检查这些方面,通常可以解决UI未更新的问题。

回到顶部