HarmonyOS 鸿蒙Next @State定义数组不可访问子元素问题以及如何循环给list->ListItem添加bindPopup

import alertDialog from ‘./Six’ const handleSecondaryButtonClick = () => { console.log(‘Secondary button was clicked!’); // 在这里执行你想要的操作 };

@Entry @Component struct seven { @State numList:string[] = new Array(16).fill(‘1’) @State numList1:string[] = new Array(16).fill({ id: ‘1’, status:false }) @State count:number =1 @State handlePopup:boolean=false

onPageShow(){ }

// 局部自定义左滑删除组件 @Builder btnDelGroup(handlePopup:boolean,index:number) { Row(){ Button(‘取消’).fontSize(10) Button(‘删除’).fontSize(10).onClick(() =>{ handlePopup = !handlePopup console.info(‘ccc=’,index) console.info(‘handlePopup=’,handlePopup)

}) .bindPopup(handlePopup,{ message:‘this is a popup’+handlePopup, placementOnTop:true, showInSubWindow:false, primaryButton:{ value:‘确定’, action:()=>{ handlePopup = !handlePopup } }, secondaryButton:{ value:‘取消’, action:()=>{ handlePopup = !handlePopup } }, // 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 onStateChange:(e)=>{ if(!e.isVisible) { handlePopup = false } } }) } }

build() { Column({space:10}){ // list组件包含listItem和listGroupItem子组件 Text(‘List列表组件’) Divider() List({space:20,initialIndex:0}){ ForEach(this.numList1,(item,index)=>{ ListItem(){ Text(‘list’+index+item.id).width(‘100%’).textAlign(TextAlign.Center).flexShrink(0) .border({width:1,color:’#ff87eaa8’}).height(40).borderRadius(8) }.swipeAction({end:this.btnDelGroup(item.status,index)}).width(‘100%’) },item=>item) }.scrollBar(BarState.Auto).height(300) Divider() }.width(‘100%’).padding(10).alignItems(HorizontalAlign.Start) }

// 问题描述：想要给ListItem动态绑定左滑删除事件，且把数组内的status传递给popup，但是现在当点击删除之后传递的参数时已经修改了，但是popup不显示，还有个问题就是 @State numList1:string[] = new Array(16).fill({ id: ‘1’, status:false }) 在onPageShow内console.info(‘111=’,this.numList)显示的是[object object] 我要如何才能在onPageShow内正常获取到数组的子元素呢？我尝试了解构，也不行，获取到的格式示例：this.numList[0].status===false

更多关于HarmonyOS 鸿蒙Next @State定义数组不可访问子元素问题以及如何循环给list->ListItem添加bindPopup的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 1楼•6 天前作者

我直接帮你写在这里吧，你访问只能通过这样：

@Entry
@Component
struct Page35 {
  @State numList1: object[] = new Array(16).fill({ id: '1', status: false })

  aboutToAppear() {
    console.log('Page35====', this.numList1[0]['id'] + "======" + JSON.stringify(this.numList1))
  }

  build() {
    Row() {
      Column() {
      }
      .width('100%')
    }
    .height('100%')
  }
}

bupafengyu 2楼•6 天前

在HarmonyOS鸿蒙Next中，@State定义的数组不可直接访问子元素，这是因为@State装饰的变量是响应式的，其子元素的访问需要通过数组索引或遍历来实现。若需访问子元素，可以通过数组的索引操作，如array[index]。

关于循环给List的ListItem添加bindPopup，可以使用ForEach组件进行遍历。ForEach接受一个数组和一个生成函数，生成函数会为数组中的每个元素创建一个ListItem，并在其中添加bindPopup。示例代码如下：

@Entry
@Component
struct MyComponent {
  @State items: string[] = ['Item1', 'Item2', 'Item3'];

  build() {
    List() {
      ForEach(this.items, (item: string) => {
        ListItem() {
          Text(item)
        }
        .bindPopup({
          message: `Popup for ${item}`,
          placement: 'bottom'
        })
      })
    }
  }
}

此代码中，ForEach遍历items数组，为每个元素创建一个ListItem，并通过bindPopup方法为每个ListItem绑定一个弹出框。

ionicwang 3楼•6 天前

在HarmonyOS鸿蒙Next中，使用@State定义的数组无法直接访问子元素，这是由于状态管理机制的限制。要解决此问题，可以将数组元素存储在单独的@State变量中，或使用@Observed和@ObjectLink进行深度监听。

对于循环给List->ListItem添加bindPopup，可以在ListItem的build方法中使用ForEach遍历数组，并为每个ListItem绑定bindPopup。示例代码如下：

@State items: string[] = ['Item1', 'Item2', 'Item3'];

build() {
  List() {
    ForEach(this.items, (item) => {
      ListItem() {
        Text(item)
      }.bindPopup({
        message: \`Popup for \${item}\`
      });
    });
  }
}