SwiftUI中点击按钮后拉取Firebase新创建帖子的问题

问题描述 #

已实现向Firebase数据库添加帖子文档的功能，希望帖子成功创建后，前端拉取并展示该帖子。但当前点击按钮时同时执行创建帖子和拉取操作，由于创建是异步操作，拉取时新帖子尚未写入数据库，导致无法显示新帖。询问应使用完成处理程序还是状态变量变更解决。

相关按钮代码：

Button {
    viewModel.uploadPost(withCaption: caption)
    presentationMode.wrappedValue.dismiss()
    showAlert.toggle()
    viewModel.fetchposts()
} label: {
    Text("Post")
        .bold()
        .padding(.horizontal)
        .padding(.vertical, 8)
        .background(Color(.systemBlue))
        .foregroundColor(.white)
        .clipShape(Capsule())
}

解决方案 #

方法一：使用完成处理程序（推荐，逻辑更直接）

核心思路是让uploadPost方法在异步上传完成后，通过回调通知视图执行后续操作。

1. 修改ViewModel中的uploadPost方法，添加完成回调参数：

func uploadPost(withCaption caption: String, completion: @escaping () -> Void) {
    // 你的Firebase上传逻辑示例
    let postRef = Firestore.firestore().collection("posts").document()
    let postData = [
        "caption": caption,
        "timestamp": Timestamp()
        // 补充其他帖子字段
    ]
    
    postRef.setData(postData) { error in
        if let error = error {
            print("帖子上传失败：\(error.localizedDescription)")
        } else {
            // 上传成功后触发回调
            completion()
        }
    }
}

2. 修改按钮动作，将后续操作放在回调闭包中执行：

Button {
    viewModel.uploadPost(withCaption: caption) {
        // 等待上传完成后再执行这些操作
        presentationMode.wrappedValue.dismiss()
        showAlert.toggle()
        viewModel.fetchposts()
    }
} label: {
    Text("Post")
        .bold()
        .padding(.horizontal)
        .padding(.vertical, 8)
        .background(Color(.systemBlue))
        .foregroundColor(.white)
        .clipShape(Capsule())
}

方法二：使用状态变量（适配SwiftUI响应式设计）

通过ViewModel中的@Published变量标记上传状态，视图监听该状态变化来触发后续逻辑。

1. 修改ViewModel，添加上传状态变量并更新uploadPost：

import Combine

class PostViewModel: ObservableObject {
    @Published var isPostUploaded = false
    
    func uploadPost(withCaption caption: String) {
        let postRef = Firestore.firestore().collection("posts").document()
        let postData = [
            "caption": caption,
            "timestamp": Timestamp()
        ]
        
        postRef.setData(postData) { [weak self] error in
            guard let self = self else { return }
            if let error = error {
                print("帖子上传失败：\(error.localizedDescription)")
            } else {
                // 上传成功后更新状态
                self.isPostUploaded = true
            }
        }
    }
    
    func fetchposts() {
        // 你的拉取帖子逻辑
    }
}

2. 在视图中监听状态变化：

struct PostCreationView: View {
    @Environment(\.presentationMode) var presentationMode
    @State private var showAlert = false
    @ObservedObject var viewModel = PostViewModel()
    @State private var caption = ""
    
    var body: some View {
        // 你的视图内容...
        
        Button {
            viewModel.uploadPost(withCaption: caption)
        } label: {
            Text("Post")
                .bold()
                .padding(.horizontal)
                .padding(.vertical, 8)
                .background(Color(.systemBlue))
                .foregroundColor(.white)
                .clipShape(Capsule())
        }
        .onChange(of: viewModel.isPostUploaded) { newValue in
            if newValue {
                presentationMode.wrappedValue.dismiss()
                showAlert.toggle()
                viewModel.fetchposts()
                // 重置状态，避免重复触发
                viewModel.isPostUploaded = false
            }
        }
    }
}

两种方法对比 #

• 完成处理程序：逻辑直观，适合这种单一的“上传完成后执行后续操作”的场景，代码耦合度低。
• 状态变量：更贴合SwiftUI的响应式设计，适合需要在多个视图组件中监听上传状态的复杂场景。

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