SwiftUI中@State数组修改报错：Cannot use mutating member on immutable value: 'self' is immutable

问题描述 #

为什么在onAppear中定义的局部数组t2Array可以正常向元素的eventArray添加元素，但在结构体头部用@State声明的t3Array执行append操作时，会报错「Cannot use mutating member on immutable value: 'self' is immutable」？

相关代码片段 #

结构体定义：

struct T2 {
    var name : String
    var eventArray : [String]
}

局部变量正常执行代码：

var t2Array = [T2(name: "T2", eventArray: ["event1"])]
t2Array[0].eventArray.append("event2")

@State变量报错代码：

t3Array = [T2(name: "T2", eventArray: ["event1"])]
self.t3Array[0].eventArray.append("event2")       // 报错：Cannot use mutating member on immutable value: 'self' is immutable

完整代码示例：

struct T2 {
    var name : String
    var eventArray : [String]
}

struct ContentView: View {
    @State var t3Array:[T2]?
   
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
        .onAppear(perform: {
             var t2Array = [T2(name: "T2", eventArray: ["event1"])]
             t2Array[0].eventArray.append("event2")
            
             t3Array = [T2(name: "T2", eventArray: ["event1"])]
             self.t3Array[0].eventArray.append("event2")        // 报错：Cannot use mutating member on immutable value: 'self' is immutable
        })
    }
}

原因分析 #

1. 局部变量的可变性 #

t2Array是onAppear闭包内的局部变量，属于可变的值类型实例。对于值类型来说，在当前作用域内直接修改其内部属性（比如eventArray.append）完全合法——你拥有这个变量的所有权，Swift允许直接修改它的内部值。

2. @State变量的限制 #

• @State是SwiftUI用来管理视图状态的属性包装器，它将变量存储在SwiftUI内部存储中，而非结构体本身。虽然@State变量可以被重新赋值，但直接通过self.t3Array[0]访问元素时，得到的是一个不可变的副本（T2是值类型，访问数组元素会返回副本）。
• 尝试修改这个副本的eventArray时，相当于修改不可变值，自然触发报错。另外，SwiftUI的状态更新规则要求：必须通过重新赋值整个@State变量触发视图刷新，直接修改内部元素属性无法被SwiftUI感知，也不符合其设计规范。

解决方法 #

要修改@State数组内元素的属性，需先创建数组的可变副本，修改副本后再重新赋值给@State变量：

方法1：可选绑定+副本修改 #

因为t3Array是可选类型，先解包得到可变副本：

t3Array = [T2(name: "T2", eventArray: ["event1"])]
// 解包并创建可变副本
if var mutableArray = t3Array {
    mutableArray[0].eventArray.append("event2")
    // 重新赋值给@State变量，触发视图更新
    t3Array = mutableArray
}

方法2：简化写法（结合可选链） #

t3Array = [T2(name: "T2", eventArray: ["event1"])]
// 确保索引存在后修改
guard var mutableArray = t3Array, mutableArray.indices.contains(0) else { return }
mutableArray[0].eventArray.append("event2")
t3Array = mutableArray

方法3：将@State变量改为非可选类型 #

如果业务允许，把t3Array声明为非可选数组，操作会更简单：

struct ContentView: View {
    // 改为非可选，初始化空数组
    @State var t3Array: [T2] = []
   
    var body: some View {
        // ... 视图代码不变
        .onAppear(perform: {
             t3Array = [T2(name: "T2", eventArray: ["event1"])]
             var mutableArray = t3Array
             mutableArray[0].eventArray.append("event2")
             t3Array = mutableArray
        })
    }
}

内容的提问来源于stack exchange，提问作者Red