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)
,这样可以确保状态更新被正确触发,避免组件状态异常。