HarmonyOS鸿蒙Next中修改State修饰的Array值push后,其他组件恢复默认值状态!!!

HarmonyOS鸿蒙Next中修改State修饰的Array值push后,其他组件恢复默认值状态!!! 比如我刷新下方代码中的isConnect 或logInfoList 值时,Toggle控件的开关状态就全部恢复默认了。下方代码可以直接在Previewer中复现该问题;寻求解决办法

import webSocket from '@ohos.net.webSocket'
import prompt from '@ohos.prompt'

class LogInfo{
  orin: number
  date: string
  level: string
  info: string
}

@Entry
@Component
struct Index {
  private videoController: VideoController = new VideoController()
  private logScroller: Scroller = new Scroller(); // 创建一个滚动控制器
  private targetUrl: string = 'ws://192.168.1.86:1218'
  @State isConnect: boolean = false
  @State cpuUse: string = '0%'
  @State memFree: string = '0M'
  @State voltage5v: string  = '0V'
  @State voltage12v: string  = '0V'
  @State coreTemp: string = '0°C'
  @State isPlay: boolean = false
  @State logInfoList: LogInfo[] = new Array()
  private LogStatus : boolean = false
  private toMachineWS: webSocket.WebSocket

  build() {
    Flex({ alignItems: ItemAlign.Center }) {
      Flex({ direction: FlexDirection.Column }){
        Flex({ direction: FlexDirection.Column}){ 
          Flex({ direction: FlexDirection.Row }){
            if (this.isConnect) {
              Button('断开Jarvis', { type: ButtonType.Normal, stateEffect: true })
                .borderRadius(2)
                .width('100%')
                .onClick(() => {
                  this.videoController.stop()
                  this.closeWebSocket()
                  this.isConnect = false
                })
            }else{
              Button('连接Jarvis', { type: ButtonType.Normal, stateEffect: true })
                .borderRadius(2)
                .width('100%')
                .onClick(() => {
                  this.toMachineWS = webSocket.createWebSocket();
                  this.monitorWebSocket()
                })
            }
          }
        }
        Flex({ direction: FlexDirection.Column}){ 
          Row(){
            Column(){
              Text('CPU使用')
                .fontSize(12)
                .padding(2)
              Text( this.cpuUse)
                .textAlign(TextAlign.Center)
                .border({
                  color: '#e6e6e6',
                  radius: 12,
                  style: BorderStyle.Solid
                })
                .backgroundColor('#e6e6e6')
                .height(24)
                .width(60)
                .fontSize(12)
            }
            .width('50%')
            Column(){
              Text('内存剩余')
                .fontSize(12)
                .padding(2)
              Text(this.memFree)
                .textAlign(TextAlign.Center)
                .border({
                  color: '#e6e6e6',
                  radius: 12,
                  style: BorderStyle.Solid
                })
                .backgroundColor('#e6e6e6')
                .height(24)
                .width(60)
                .fontSize(12)
            }
            .width('50%')
          }
          .height('25%')
          .margin(4)
          Row(){
            Column(){
              Text('5V电压')
                .fontSize(12)
                .padding(2)
              Text( this.voltage5v)
                .textAlign(TextAlign.Center)
                .border({
                  color: '#e6e6e6',
                  radius: 12,
                  style: BorderStyle.Solid
                })
                .backgroundColor('#e6e6e6')
                .height(24)
                .width(60)
                .fontSize(12)
            }
            .width('50%')
            Column(){
              Text('12V电压')
                .fontSize(12)
                .padding(2)
              Text(this.voltage12v)
                .textAlign(TextAlign.Center)
                .border({
                  color: '#e6e6e6',
                  radius: 12,
                  style: BorderStyle.Solid
                })
                .backgroundColor('#e6e6e6')
                .height(24)
                .width(60)
                .fontSize(12)
            }
            .width('50%')
          }
          .height('25%')
          .margin(4)
          Row(){
            Column(){
              Text('核心温度')
                .fontSize(12)
                .padding(2)
              Text( this.coreTemp)
                .textAlign(TextAlign.Center)
                .border({
                  color: '#e6e6e6',
                  radius: 12,
                  style: BorderStyle.Solid
                })
                .backgroundColor('#e6e6e6')
                .height(24)
                .width(60)
                .fontSize(12)
            }
            .width('50%')
          }
          .height('25%')
          .margin(4)
        }
      }
      .width('100%')
      .height('80%')
    }
    .width('100%')
    .height('60%')
    // 行动方向控制
    Flex({ direction: FlexDirection.Column }) {
      Grid() {
        GridItem() {
          Button('左上', { type: ButtonType.Normal, stateEffect: true })
            .backgroundColor(0x317aff)
            .width('100%')
            .height('100%')
            .onTouch((event: TouchEvent) => {
              if (event.type === TouchType.Down) {
                this.sendMessage('foot_move', '{"left":0, "right":100}')
              }
              if (event.type === TouchType.Up) {
                this.sendMessage('foot_move', '{"left":0, "right":0}')
              }
            })
        }
        GridItem() {
          Button('上', { type: ButtonType.Normal, stateEffect: true })
            .backgroundColor(0x317aff)
            .width('100%')
            .height('100%')
            .onTouch((event: TouchEvent) => {
              if (event.type === TouchType.Down) {
                this.sendMessage('foot_move', '{"left":100, "right":100}')
              }
              if (event.type === TouchType.Up) {
                this.sendMessage('foot_move', '{"left":0, "right":0}')
              }
            })
        }
        GridItem() {
          Button('右上', { type: ButtonType.Normal, stateEffect: true })
            .backgroundColor(0x317aff)
            .width('100%')
            .height('100%')
            .onTouch((event: TouchEvent) => {
              if (event.type === TouchType.Down) {
                this.sendMessage('foot_move', '{"left":100, "right":0}')
              }
              if (event.type === TouchType.Up) {
                this.sendMessage('foot_move', '{"left":0, "right":0}')
              }
            })
        }
        GridItem() {
          Button('左', { type: ButtonType.Normal, stateEffect: true })
            .backgroundColor(0x317aff)
            .width('100%')
            .height('100%')
            .onTouch((event: TouchEvent) => {
              if (event.type === TouchType.Down) {
                this.sendMessage('foot_move', '{"left":-100, "right":100}')
              }
              if (event.type === TouchType.Up) {
                this.sendMessage('foot_move', '{"left":0, "right":0}')
              }
            })
        }
        GridItem() {
          Button('中', { type: ButtonType.Normal, stateEffect: true })
            .backgroundColor(0x317aff)
            .width('100%')
            .height('100%')
            .onTouch((event: TouchEvent) => {
              if (event.type === TouchType.Down) {
                this.sendMessage('foot_move', '{"left":0, "right":0}')
              }
              if (event.type === TouchType.Up) {
                this.sendMessage('foot_move', '{"left":0, "right":0}')
              }
            })
        }
        GridItem() {
          Button('右', { type: ButtonType.Normal, stateEffect: true })
            .backgroundColor(0x317aff)
            .width('100%')
            .height('100%')
            .onTouch((event: TouchEvent) => {
              if (event.type === TouchType.Down) {
                this.sendMessage('foot_move', '{"left":100, "right":-100}')
              }
              if (event.type === TouchType.Up) {
                this.sendMessage('foot_move', '{"left":0, "right":0}')
              }
            })
        }
        GridItem() {
          Button('左下', { type: ButtonType.Normal, stateEffect: true })
            .backgroundColor(0x317aff)
            .width('100%')
            .height('100%')
            .onTouch((event: TouchEvent) => {
              if (event.type === TouchType.Down) {
                this.sendMessage('foot_move', '{"left":0, "right":-100}')
              }
              if (event.type === TouchType.Up) {
                this.sendMessage('foot_move', '{"left":0, "right":0}')
              }
            })
        }
        GridItem() {
          Button('下', { type: ButtonType.Normal, stateEffect: true })
            .backgroundColor(0x317aff)
            .width('100%')
            .height('100%')
            .onTouch((event: TouchEvent) => {
              if (event.type === TouchType.Down) {
                this.sendMessage('foot_move', '{"left":-100, "right":-100}')
              }
              if (event.type === TouchType.Up) {
                this.sendMessage('foot_move', '{"left":0, "right":0}')
              }
            })
        }
        GridItem() {
          Button('右下', { type: ButtonType.Normal, stateEffect: true })
            .backgroundColor(0x317aff)
            .width('100%')
            .height('100%')
            .onTouch((event: TouchEvent) => {
              if (event.type === TouchType.Down) {
                this.sendMessage('foot_move', '{"left":-100, "right":0}')
              }
              if (event.type === TouchType.Up) {
                this.sendMessage('foot_move', '{"left":0, "right":0}')
              }
            })
        }
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr')
      .backgroundColor(0xFAEEE0)
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('40%')
  }
  .width("20%")
  .height("100%")
  // 摄像头实时画面
  Flex({ direction: FlexDirection.Column }){
    Flex({ }){
      Video({
        src: "http://cloud.ruiboyun.net/vod/vod3/e0u83v08/index.m3u8",
        controller: this.videoController
      })
      .controls(false)
      .width("100%")
      .height("100%")
      .autoPlay(this.isPlay)
      .onError(() => {
        prompt.showToast({
          message: "播放发生错误!"
        })
      })
    }
    .width("100%")
    .height("70%")
    // 日志显示栏
    Flex(){
      List({ space: 1, initialIndex: 0, scroller: this.logScroller }) {
        ForEach(this.logInfoList, (logInfo) => {
          ListItem() {
            if (logInfo.orin == 1) {
              Text('->' + logInfo.date + ' ' + logInfo.level + ' ' + logInfo.info)
                .width('100%')
                .fontSize(12)
            } else if (logInfo.orin == 2) {
              Text('<-' + logInfo.date + ' ' + logInfo.level + ' ' + logInfo.info)
                .width('100%')
                .fontSize(12)
            } else {
              Text('--' + logInfo.date + ' ' + logInfo.level + ' ' + logInfo.info)
                .width('100%')
                .fontSize(12)
            }
          }
        })
      }
      .editMode(false)
      .width("100%")
      .height("100%")
    }
    .width("100%")
    .height("30%")
  }
  .width("60%")
  .height("100%")
  Flex({ direction: FlexDirection.Column }){
    Flex({ direction: FlexDirection.Column}) {
      Row(){
        Column(){
          Text('自主活动').fontSize(12).padding(0)
          Toggle(
            {type: ToggleType.Switch})
            .onChange((isOn) => {
              this.sendMessage('auto_move', '{"on-off":' + isOn + '}')
            })
            .height(14)
            .padding(0)
        }
        .width('50%')
        Column(){
          Text('Ai识别').fontSize(12).padding(0)
          Toggle(
            {type: ToggleType.Switch})
            .onChange((isOn) => {
              this.sendMessage('detect', '{"on-off":' + isOn + '}')
            })
            .height(14)
            .padding(0)
        }
        .width('50%')
      }
      .height('25%')
      Row(){
        Column(){
          Text('调试日志').fontSize(12).padding(0)
          Toggle(
            {type: ToggleType.Switch})
            .onChange((isOn) => {
              this.LogStatus = isOn
            })
            .height(14)
            .padding(0)
        }
        .width('50%')
        Column(){
          Text('待定功能').fontSize(12).padding(0)
          Toggle(
            {type: ToggleType.Switch})
            .onChange(() => {})
            .height(14)
            .padding(0)
        }
        .width('50%')
      }
      .height('25%')
      Row(){
        Column(){
          Text('待定功能').fontSize(12).padding(0)
          Toggle({type: ToggleType.Switch})
            .height(14)
            .padding(0)
        }
        .width('50%')
        Column(){
          Text('待定功能').fontSize(12).padding(0)
          Toggle({type: ToggleType.Switch})
            .height(14)
            .padding(0)
        }
        .width('50%')
      }
      .height('25%')
      Row(){
        Column(){
          Text('待定功能').fontSize(12).padding(0)
          Toggle({type: ToggleType.Switch})
            .height(14)
            .padding(0)
        }
        .width('50%')
        Column(){
          Text('待定功能').fontSize(12).padding(0)
          Toggle({type: ToggleType.Switch})
            .height(14)
            .padding(0)
        }
        .width('50%')
      }
      .height('25%')
    }
  }
  .width('100%')
  .height('60%')
  Flex({ direction: FlexDirection.Column}) {
    // 摄像头方向控制
    Grid() {
      GridItem() {
        Button('左上', { type: ButtonType.Normal, stateEffect: true })
          .backgroundColor(0x317aff)
          .width('100%')
          .height('100%')
          .onClick(() => {
            this.sendMessage("header_move", "left")
          })
      }
      GridItem() {
        Button('上', { type: ButtonType.Normal, stateEffect: true })
          .backgroundColor(0x317aff)
          .width('100%')
          .height('100%')
          .onClick(() => {
            this.sendMessage("header_move", "left")
          })
      }
      GridItem() {
        Button('右上', { type: ButtonType.Normal, stateEffect: true })
          .backgroundColor(0x317aff)
          .width('100%')
          .height('100%')
          .onClick(() => {
            this.sendMessage("header_move", "left")
          })
      }
      GridItem() {
        Button('左', { type: ButtonType.Normal, stateEffect: true })
          .backgroundColor(0x317aff)
          .width('100%')
          .height('100%')
          .onClick(() => {
            this.sendMessage("header_move", "left")
          })
      }
      GridItem() {
        Button('中', { type: ButtonType.Normal, stateEffect: true })
          .backgroundColor(0x317aff)
          .width('100%')
          .height('100%')
          .onClick(() => {
            this.sendMessage("header_move", "center")
          })
      }
      GridItem() {
        Button('右', { type: ButtonType.Normal, stateEffect: true })
          .backgroundColor(0x317aff)
          .width('100%')
          .height('100%')
          .onClick(() => {
            this.sendMessage("header_move", "left")
          })
      }
      GridItem() {
        Button('左下', { type: ButtonType.Normal, stateEffect: true })
          .backgroundColor(0x317aff)
          .width('100%')
          .height('100%')
          .onClick(() => {
            this.sendMessage("header_move", "left")
          })
      }
      GridItem() {
        Button('下', { type: ButtonType.Normal, stateEffect: true })
          .backgroundColor(0x317aff)
          .width('100%')
          .height('100%')
          .onClick(() => {
            this.sendMessage("header_move", "left")
          })
      }
      GridItem() {
        Button('右下', { type: ButtonType.Normal, stateEffect: true })
          .backgroundColor(0x317aff)
          .width('100%')
          .height('100%')
          .onClick(() => {
            this.sendMessage("header_move", "left")
          })
      }
    }
    .columnsTemplate('1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr')
    .backgroundColor(0xFAEEE0)
    .width('100%')
    .height('100%')
  }
  .width('100%')
  .height('40%')
}
.width('20%')
.height('100%')
.flex({
  backgroundColor: Color.White
})

更多关于HarmonyOS鸿蒙Next中修改State修饰的Array值push后,其他组件恢复默认值状态!!!的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中修改State修饰的Array值push后,其他组件恢复默认值状态!!!的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,使用State修饰的Array时,直接使用push方法修改数组可能会导致状态管理异常,从而引发其他组件恢复默认值。建议使用State的setter方法或更新函数来确保状态变更被正确追踪。例如,使用this.array = [...this.array, newItem]来替代this.array.push(newItem),这样可以确保状态更新被正确触发,避免组件状态异常。

回到顶部