SwiftUI预览中EnvironmentObject数据设置失效问题排查

问题背景 #

开发了层级为FeedView -> ReaderView -> ReaderOverlay的SwiftUI视图，点击ReaderOverlay的「next chapter」按钮时，预期调用ReaderViewModel的populate方法刷新视图。该功能在App本体中正常工作，但在预览环境下完全失效。已尝试在预览代码中添加EnvironmentObject实例，但问题仍未解决。

核心原因 #

1. 预览中FeedViewModel无有效数据：当前预览里的FeedViewModel是空实例，mangaFeed.items数组没有数据，点击按钮时mangaFeed.items[ch.chIndex + 1]会返回nil，后续强制解包nextChapter!会导致静默崩溃，功能无法执行。
2. 未处理可选值安全问题：按钮逻辑中直接强制解包nextChapter，一旦数据为空就会触发崩溃，预览环境不会显示崩溃日志，只会表现为功能失效。

解决方案 #

1. 给预览的FeedViewModel填充测试数据 #

初始化FeedViewModel时，手动添加至少两个ChapterInfo实例，确保mangaFeed.items有可访问的后续章节数据。

2. 修复按钮中的强制解包问题 #

用可选绑定替代强制解包，避免空值引发的崩溃，同时添加边界判断，防止索引越界。

3. 调整预览中ChapterIndex的初始值 #

设置chIndex为0，确保点击按钮时能正确访问到第二个测试章节。

修改后的代码 #

调整ReaderOverlay的按钮逻辑 #

Button(action: {
    // 先判断索引是否在有效范围内
    guard ch.chIndex + 1 < mangaFeed.items.count else {
        return // 超出范围时不执行后续操作
    }
    nextChapter = mangaFeed.items[ch.chIndex + 1]
    ch.chIndex += 1
    // 用可选绑定安全访问nextChapter
    if let chapterID = nextChapter?.id {
        Task { await reader.populate(chapterID: chapterID) }
    }
}){
    Text("next chapter")
}

修改后的预览代码 #

struct readerOverlay_Previews: PreviewProvider {
    @State static var currPage = 0
    
    static var previews: some View {
        // 创建两个测试章节
        let dummyChapter1 = ChapterInfo(
            id: "5df4596c-febd-492e-bf0d-d98f59fd3f2b", 
            type: "Chapter", 
            attributes: chInfo_Attributes(volume: "1", chapter: "1", title: "Test", publishAt: "2020-05-23", externalUrl: "" ), 
            relationships: [chapter_Relationships(id: "s", type: "manga", attributes: attributes(title: ["en":"20TH Century Boys"]))]
        )
        let dummyChapter2 = ChapterInfo(
            id: "another-chapter-id", 
            type: "Chapter", 
            attributes: chInfo_Attributes(volume: "1", chapter: "2", title: "Test Chapter 2", publishAt: "2020-05-24", externalUrl: "" ), 
            relationships: [chapter_Relationships(id: "s", type: "manga", attributes: attributes(title: ["en":"20TH Century Boys"]))]
        )
        
        // 初始化带测试数据的FeedViewModel
        let testFeedVM = FeedViewModel()
        testFeedVM.items = [dummyChapter1, dummyChapter2]
        
        // 初始化ChapterIndex并设置初始索引
        let testChapterIndex = ChapterIndex()
        testChapterIndex.chIndex = 0
        
        readerOverlay(chapter: dummyChapter1, currentPage: $currPage, totalPages: 10)
            .environmentObject(testFeedVM)
            .environmentObject(testChapterIndex)
            .environmentObject(ReaderViewModel())
    }
}

额外优化建议 #

• 在预览中给ReaderViewModel预设pages数据，让页面计数和TabView显示更贴近实际运行效果：

  let testReaderVM = ReaderViewModel()
  testReaderVM.pages = Array(repeating: Page.example, count: 10) // 假设Page有example静态属性
  

• 为所有ViewModel添加便捷的测试初始化方法，简化预览代码的编写。

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