SwiftUI中如何阻止.navigationDestination重复渲染？

问题场景 #

在TabView嵌套NavigationStack的结构中，使用.navigationDestination跳转至目标视图后，视图内的.task{}会重复执行2-3次。该问题仅在切换过一次标签页后触发，App刚启动时直接点击跳转不会出现异常。

核心原因 #

你的代码中两个Tab共用了同一个Router实例的navigationPath，且每个Tab都包含独立的NavigationStack实例：

• 切换Tab时，系统会销毁非活跃Tab的视图层级（包括其中的NavigationStack）
• 当navigationPath存在跳转记录时，重新激活Tab会重建NavigationStack，此时NavigationStack会再次匹配navigationPath中的值，重复触发.navigationDestination创建目标视图（BookView），最终导致.task{}多次执行

解决方案 #

方案1：给每个Tab分配独立的导航路径（推荐，从根源解决） #

让每个Tab拥有专属的导航路径，避免共用路径导致的重复匹配：

1. 修改Router类，为每个Tab维护独立的NavigationPath：

final class Router: ObservableObject {
    @Published var tabOnePath: NavigationPath = .init()
    @Published var tabTwoPath: NavigationPath = .init()
}

2. 更新ContentView，为每个Tab绑定对应的导航路径：

struct ContentView: View {
    @StateObject private var router = Router()
    var body: some View {
        TabView {
            // Tab One 专属导航栈
            NavigationStack(path: $router.tabOnePath) {
                HomeView(isTabOne: true)
                    .navigationDestination(for: BookViewModel.self) { book in
                        BookView(book: book)
                    }
            }
            .tabItem {
                Label("Tab One", systemImage: "house")
            }
            
            // Tab Two 专属导航栈
            NavigationStack(path: $router.tabTwoPath) {
                HomeView(isTabOne: false)
                    .navigationDestination(for: BookViewModel.self) { book in
                        BookView(book: book)
                    }
            }
            .tabItem {
                Label("Tab Two", systemImage: "house")
            }
        }
        .environmentObject(router)
    }
}

3. 给HomeView添加参数，区分当前Tab并使用对应路径跳转：

struct HomeView: View {
    @EnvironmentObject private var router: Router
    let isTabOne: Bool
    @State private var books: [BookViewModel] = [.init(id: 1, title: "First Book", yearPublished: 2023), .init(id: 2, title: "Second Book", yearPublished: 2024)]
    
    var body: some View {
        List {
            ForEach(books) { book in
                Button(book.title) {
                    if isTabOne {
                        router.tabOnePath.append(book)
                    } else {
                        router.tabTwoPath.append(book)
                    }
                }
            }
        }
        .navigationTitle("First View")
    }
}

方案2：限制.task{}仅执行一次（临时 workaround） #

如果不想修改导航结构，可以给目标视图添加状态标记，确保.task{}只执行一次：

struct BookView: View {
    @ObservedObject var book: BookViewModel
    @State private var hasExecutedTask = false
    
    var body: some View {
        VStack {
            Text(book.title)
            Text("\(book.yearPublished)")
        }
        .navigationTitle(book.title)
        .task {
            guard !hasExecutedTask else { return }
            hasExecutedTask = true
            print("opened")
        }
    }
}

这种方法仅能阻止任务重复执行，但视图仍会被多次初始化，适合快速临时修复。

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