HarmonyOS 鸿蒙Next 组件间的状态管理困难

HarmonyOS 鸿蒙Next 组件间的状态管理困难

目标及问题

问题：
下拉菜单中只有一个文件。更新的列表数据没能同步到这个选择组件中。

主界面的相关代码：

变量声明部分：

@Entry
@Component
struct ScanPageIndex {
  private breakpointSystem: BreakpointSystem = new BreakpointSystem()
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm'
  [@State](/user/State) dir: string = 'Ld';
  [@State](/user/State) cfglist: string[] = [];
  [@State](/user/State) linlist: string[] = [];
  [@State](/user/State) pagetitle: string = '连接设备';
  [@State](/user/State) SSIDnotEmpty: boolean = false;
  [@State](/user/State) PWDnotEmpty: boolean = false;
  [@State](/user/State) ssid: string = "";
  [@State](/user/State) fileisSelect: boolean  = false;

组件调用部分：

                Button("创建配置")
                  .fontSize(20)
                  .height(40)
                  .width(150)
                  .fontWeight(FontWeight.Bold)
                  .onClick(async () => {
                    FileUtils.newFile('/' + this.cfgFileName);
                    this.filelist = await FileUtils.listFiles(getContext(this).filesDir,'.cfg','.csv');
                    ToastUtils(this.filelist.length.toString());
                    this.cfglist = await FileUtils.listFiles(getContext(this).filesDir,'.cfg');
                    this.cfglen = this.cfglist.length;
                    this.linlist = await FileUtils.listFiles(getContext(this).filesDir,'.csv');
                    this.linlen = this.linlist.length;
                  })
              }

              if(this.cfglist.length) SelectExt({SelectIndex:0,seletTitle:'选择配置文件',thisSetID:0,RecordTitle:'cfgFile',tobeRecord:false,seletItems: this.cfglist })
              if(this.linlist.length) SelectExt({SelectIndex:0,seletTitle:'选择线性配置',thisSetID:1,RecordTitle:'linarFile',tobeRecord:false,seletItems:this.linlist})
              //  [@State](/user/State) SelectIndex:number=0;

组件的实现代码

const TAG = 'SelectExt'
@Component
export struct SelectExt {
  [@State](/user/State) SelectIndex:number=0;
  [@State](/user/State) thisSetID:number=0;
  [@State](/user/State) seletItems:Array<string>=[];
  [@State](/user/State) seletTitle:string='';
  [@State](/user/State) RecordTitle:string='';
  [@State](/user/State) tobeRecord:boolean=false

  @Builder settingItem($$:{settingId: number, icon: Resource, title: string | Resource, showDivider: boolean}) {
    Stack() {
      if ($$.settingId == this.thisSetID) {
        Column() {
          Column()
           .backgroundColor(get_translucentSaturation_accent())
            .height('100%')
            .width('100%')
            .borderRadius(16)
        }
        .height('100%')
        .width('100%')
        .padding(3)
      }

      Column() {
        Row() {
          Image($$.icon)
            .height(24)
            .width(24)
          Text($$.title)
            .fontColor($r('app.color.text_level1'))
            .fontSize(16)
            .fontWeight(FontWeight.Medium)
            .margin({ left: 16 })
        }
        .height(56)

        if ($$.showDivider) {
          Column() {
            Divider().width('100%').color($r('app.color.divider'))
          }.padding({ left: 40 })
        }
      }
      .padding({ left: 12, right: 12 })
      .alignItems(HorizontalAlign.Start)
      .width('100%')
    }
    .height(56)
    .width('100%')
  }

  @Builder settingSubTitle($$:{text: string}) {
    Row() {
      Text($$.text)
        .fontWeight(FontWeight.Medium)
        .fontColor($r('app.color.text_level2'))
        .fontSize(14)
      Image($r('app.media.ic_arrow_right'))
        .width(12)
        .height(24)
        .margin({ left: 4 })
    }
    .padding({ right: 12 })
    .justifyContent(FlexAlign.End)
  }

  @Builder selectMenu($$:{thisResource: Array<SelectionItem>, outPut: (value: number) => number}) {
    Column() {
      Column() {
        ForEach($$.thisResource, (item: SelectionItem, index: number) => {
          Column() {
            Column() {
              Text(item.title)
                .fontColor(item.index == $$.outPut(-1) ? get_accent() : $r('app.color.text_level1'))
                .fontSize(14)
            }
            .width('100%')
            .alignItems(HorizontalAlign.Start)
            .padding({ bottom: 12, top: 12 })
            .onTouch(() => {
              $$.outPut(item[1])
              console.info($$.outPut(-1).toString())
            })

            if (index != $$.thisResource.length - 1)
              Divider().color($r('app.color.divider'))
          }
          .width('100%')
        })
      }
      .padding({ left: 12, right: 12 })
    }
    .width(112)
    .justifyContent(FlexAlign.Start)
  }

  @Builder settingSelect($$:{thisResource: Array<SelectionItem>, outPut: (value: number) => number}) {
    Row() {
      Text($$.thisResource[$$.outPut(-1)][0])
        .fontColor($r('app.color.text_level1'))
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
      Image($r('app.media.ic_spinner_level1'))
        .width(24)
        .height(24)
    }
    .bindMenu(this.selectMenu({thisResource: $$.thisResource, outPut: $$.outPut}))
    .padding({ right: 12 })
    .justifyContent(FlexAlign.End)
  }

  build() {
    Column() {
      Stack({ alignContent: Alignment.End }) {
        this.settingItem({
          settingId: 9,
          icon: $r('app.media.ic_setting_calendarSet'),
          title: this.seletTitle,
          showDivider: true
        })
        this.settingSelect({ thisResource: builtSelectArray(this.seletItems), outPut: (value: number) => {
          if (value > -1) {
            this.SelectIndex = value
          if(this.tobeRecord)AppStorage.set(this.RecordTitle, value.toString());
          }
          return this.SelectIndex
        } })
      }.height(56).width('100%')
    }
    .width('100%')
  }
}

依据我的理解，主界面中的linlist 和 cfglist 都是@State,一旦创建文件后必然同步更新这两个列表数据。但是SelectExt的seletItems列表数据，只是在linList.len>0才更新一次。无法多次同步数据。又不能@provide， @Customer，因为这两个组件的数据源不一致。请大师指教