@EnvironmentObject属性更新延迟致日历视图渲染异常问题排查

问题背景 #

我正在开发一款按月渲染的类日历应用，包含两个存储独立数据的日历（A和B）。核心状态通过EnvironmentClass这个ObservableObject管理，其中@Published var selectedCalendar用于控制当前渲染的目标日历：

class EnvironmentClass: ObservableObject {
    
    @Published var calendars: OrderedDictionary<String,CalendarClass> = CalendarClass.sampleData 
    @Published var date = Date() // 今日日期
    @Published var selectedCalendar = "A"
}

首页通过CalendarsView切换日历，但切换时出现异常：启动后默认显示日历A，切换到B时，仅部分日期单元格更新为B的数据，其余仍显示A的内容。

调试补充信息 #

• 每次启动后，残留A的单元格数量随机，有时仅几个，有时较多
• 切换到B时，渲染日期单元格的ForEach会按顺序跳过部分单元格，这些单元格要等selectedCalendar变更完成后才会更新为B
• 第二次点击切换到B的按钮时，所有单元格均正确显示B；切换回A会出现同样的问题

相关代码 #

日历切换视图（CalendarsView） #

import SwiftUI

struct CalendarsView: View {
    
    @EnvironmentObject var env: EnvironmentClass
    
    var body: some View {
        ScrollView (.horizontal, showsIndicators: true) {
            HStack (spacing: 30) {
                ForEach(env.calendars.keys, id: \.self) {index in
                    Button(action: {
                        env.selectedCalendar = index
                    }) {
                        Text(index)
                            .font(.headline)
                            .frame(maxWidth: .infinity, alignment: .leading)
                    }
                }
            }.padding(.horizontal, 35).padding(.bottom,50)
        }
    }
}

（注：env.calendars.keys包含"A"和"B"）

日历网格渲染代码 #

var calendarGrid: some View {
        
        VStack{
            let columnLayout: [GridItem] = Array(repeating: GridItem(), count: 7)
            let firstDayOfMonth = CalendarHelper().firstOfMonth(env.date)
            let startingSpaces =  CalendarHelper().weekDay(CalendarHelper().minusDay(firstDayOfMonth))
            let currentMonth: [Date?] =  Array(repeating: nil, count: startingSpaces) + CalendarHelper().daysInMonthArray(env.date)

// 用含nil的currentMonth处理星期几的缩进（若月初为周五，跳过4个日期单元格）
        
            LazyVGrid(columns: columnLayout) {
                ForEach(currentMonth.indices, id: \.self) { index in
                    if (currentMonth[index] != nil) {
                        DateCell(day: currentMonth[index]!)
                            .environmentObject(env)
                    }
                    else {
                        Text("")
                    }
                }
            }
        }.padding(.horizontal, 25)
    }

问题原因分析 #

核心问题出在LazyVGrid的ForEach使用索引（indices）作为id，SwiftUI的视图复用机制会基于id判断是否重建视图。当selectedCalendar变更时，currentMonth的索引未发生变化，SwiftUI会复用旧的单元格视图实例，导致部分单元格未读取新的selectedCalendar值更新内容。

加上LazyVGrid的懒加载特性：切换日历瞬间，仅可视范围内未加载的单元格会用新状态渲染，已加载的单元格复用旧状态，造成混合显示。第二次切换时所有单元格已加载，SwiftUI会重新检查状态，因此能正确更新。

修复方案 #

方案1：为ForEach提供关联状态的唯一id #

摒弃索引作为id，改用日期本身作为唯一标识，同时调整空白单元格的处理逻辑：

LazyVGrid(columns: columnLayout) {
    // 先渲染日期单元格，用日期作为id
    ForEach(currentMonth.compactMap { $0 }, id: \.self) { day in
        DateCell(day: day)
            .environmentObject(env)
    }
    // 单独渲染空白单元格
    ForEach(0..<startingSpaces, id: \.self) { _ in
        Text("")
    }
}

每个日期单元格的id是唯一的日期值，当selectedCalendar变更时，DateCell依赖的@Published变量会触发视图更新，确保内容同步。

方案2：让DateCell显式依赖selectedCalendar #

若需保留原有ForEach结构，可在DateCell中添加对selectedCalendar的显式依赖，强制状态变化时重建视图：

struct DateCell: View {
    let day: Date
    @EnvironmentObject var env: EnvironmentClass
    
    var body: some View {
        // 自定义单元格内容示例
        Text("\(Calendar.current.component(.day, from: day))")
            .background(
                env.calendars[env.selectedCalendar]?.hasEvent(for: day) ?? false 
                ? Color.blue.opacity(0.3) 
                : Color.clear
            )
            // 添加显式依赖，selectedCalendar变更时重建视图
            .id(env.selectedCalendar)
    }
}

通过.id(env.selectedCalendar)，当选中的日历变化时，SwiftUI会将单元格视为新视图，重新读取最新状态渲染。

方案3：优化日历数据的可观察性 #

如果CalendarClass是引用类型，确保其内部数据用@Published修饰；如果是值类型，确保每次访问env.calendars[env.selectedCalendar]时能获取到最新实例，避免旧数据被缓存。

验证效果 #

修改后，切换日历A/B时，所有日期单元格会立即根据当前选中的日历更新内容，不会出现部分残留旧数据的情况，多次切换也能保持一致的正确显示。

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