HarmonyOS鸿蒙Next中arkts页面A路由跳转页面B，传递map对象，B页面修改map,页面A的map同时变化

在ArkTS中，当页面A通过路由跳转到页面B并传递map对象时，如果B页面修改map，页面A的map也会同时变化，这是因为对象传递的是引用。以下是详细的解决方案：

1：深拷贝传递

// 页面A
@Component
struct PageA {
  @State originalMap: Map<string, any> = new Map([
    ['name', '张三'],
    ['age', 25],
    ['city', '北京']
  ])

  build() {
    Column() {
      Text('页面A')
        .fontSize(20)
      
      Text(`原始数据: ${JSON.stringify(Array.from(this.originalMap))}`)
        .fontSize(14)
        .margin(10)
      
      Button('跳转到页面B')
        .onClick(() => {
          // 深拷贝map对象
          const copiedMap = this.deepCopyMap(this.originalMap)
          router.pushUrl({
            url: 'pages/PageB',
            params: {
              dataMap: copiedMap
            }
          })
        })
    }
  }

  // 深拷贝Map对象
  private deepCopyMap(map: Map<string, any>): Map<string, any> {
    const newMap = new Map()
    for (const [key, value] of map) {
      if (typeof value === 'object' && value !== null) {
        newMap.set(key, JSON.parse(JSON.stringify(value)))
      } else {
        newMap.set(key, value)
      }
    }
    return newMap
  }
}

2：使用状态管理

// 全局状态管理
class GlobalState {
  private static instance: GlobalState
  @State mapData: Map<string, any> = new Map()

  static getInstance(): GlobalState {
    if (!GlobalState.instance) {
      GlobalState.instance = new GlobalState()
    }
    return GlobalState.instance
  }

  setMapData(map: Map<string, any>) {
    this.mapData = new Map(map)
  }

  getMapData(): Map<string, any> {
    return new Map(this.mapData)
  }
}

// 页面A
@Component
struct PageA {
  @State originalMap: Map<string, any> = new Map([
    ['name', '张三'],
    ['age', 25],
    ['city', '北京']
  ])

  build() {
    Column() {
      Text('页面A')
        .fontSize(20)
      
      Text(`原始数据: ${JSON.stringify(Array.from(this.originalMap))}`)
        .fontSize(14)
        .margin(10)
      
      Button('跳转到页面B')
        .onClick(() => {
          // 存储到全局状态
          GlobalState.getInstance().setMapData(this.originalMap)
          router.pushUrl({
            url: 'pages/PageB'
          })
        })
    }
  }
}

// 页面B
@Component
struct PageB {
  @State receivedMap: Map<string, any> = new Map()

  aboutToAppear() {
    // 从全局状态获取数据
    this.receivedMap = GlobalState.getInstance().getMapData()
  }

  build() {
    Column() {
      Text('页面B')
        .fontSize(20)
      
      Text(`接收数据: ${JSON.stringify(Array.from(this.receivedMap))}`)
        .fontSize(14)
        .margin(10)
      
      Button('修改数据')
        .onClick(() => {
          this.receivedMap.set('age', 30)
          this.receivedMap.set('city', '上海')
        })
      
      Button('返回页面A')
        .onClick(() => {
          router.back()
        })
    }
  }
}