SwiftUI+TCA应用中onAppear触发后界面未更新问题求助

问题背景 #

用TCA开发SwiftUI应用时遇到异常：.onAppear动作已触发，但界面完全没有变化，模拟器和真机上均复现。通过._printChanges()打印State变化，显示状态确实被正确更新，但视图就是不刷新。

环境信息：

• Xcode 14.3
• TCA分支：prerelease/1.0（navigation-beta分支同样存在该问题）

复现代码 #

import SwiftUI
import ComposableArchitecture

struct PlayAround: ReducerProtocol {
  struct State: Equatable {
    var text: String = ""
  }

  enum Action: Equatable {
    case setText(String)
    case onAppear
  }

  var body: some ReducerProtocol<State, Action> {
    Reduce { state, action in
      switch action {
      case .setText(let newText):
        state.text = newText
        return .none
      case .onAppear:
        state.text = "On Appear"
        return .none
      }
    }
    ._printChanges()
  }
}

struct PlayAroundView: View {
  let store: StoreOf<PlayAround>

  init(store: StoreOf<PlayAround>) {
    self.store = store
  }

  var body: some View {
    WithViewStore(store, observe: { $0 }) { viewStore in
      VStack {
        Text(viewStore.text)
        Button {
          viewStore.send(.setText("Send Button"))
        } label: {
          Text("Send text")
        }
      }
      .onAppear {
        viewStore.send(.onAppear)
      }
    }
  }
}

struct PlayAround_Previews: PreviewProvider {
  static var previews: some View {
    NavigationStack {
      PlayAroundView(
        store: .init(
          initialState: PlayAround.State(text: "Init"),
          reducer: PlayAround()
        )
      )
    }
  }
}

预期行为：视图出现时文本显示为"On Appear"，实际始终停留在初始化的"Init"。

问题原因 #

WithViewStore的默认初始化逻辑会在视图首次渲染完成后才完成State订阅，而.onAppear的触发时机和这个订阅时机重叠——当onAppear发送.onAppear动作更新State时，视图还没完成对State的订阅，因此后续的状态变化无法通知到视图，导致界面不刷新。

解决方案 #

提供两种可行的解决方式：

方式一：给WithViewStore添加send参数

通过添加send: { _ in .none }参数，强制WithViewStore提前完成State订阅：

WithViewStore(store, observe: { $0 }, send: { _ in .none }) { viewStore in
  VStack {
    Text(viewStore.text)
    Button {
      viewStore.send(.setText("Send Button"))
    } label: {
      Text("Send text")
    }
  }
  .onAppear {
    viewStore.send(.onAppear)
  }
}

方式二：手动初始化ViewStore

在视图初始化阶段就创建并持有ViewStore，确保订阅在.onAppear触发前完成：

struct PlayAroundView: View {
  let store: StoreOf<PlayAround>
  @ObservedObject var viewStore: ViewStoreOf<PlayAround>

  init(store: StoreOf<PlayAround>) {
    self.store = store
    self.viewStore = ViewStore(store, observe: { $0 })
  }

  var body: some View {
    VStack {
      Text(viewStore.text)
      Button {
        viewStore.send(.setText("Send Button"))
      } label: {
        Text("Send text")
      }
    }
    .onAppear {
      viewStore.send(.onAppear)
    }
  }
}

原理说明 #

两种方式本质都是让视图在.onAppear触发前完成对State的订阅：

• 方式一通过send参数跳过WithViewStore内部的异步初始化逻辑，直接建立订阅；
• 方式二在视图初始化时就完成ViewStore的创建，确保订阅时机早于.onAppear的触发时机。

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