State variable value is being lost

Question

Im have the following code running in ios 1. When the button "View A" is pressed the state variable nextModalView2 is set to NextModalView2.a But When the Sheet() call is executed the value of nextModalView2 is reset to .none.

How is it possible?

Alsoif you look at the screenshot, you will see that the debugger console panel is showing a value for nextModalView2 that is different from what shown in the variable panel of the debugger. How is that?


enum NextModalView2{
  case none
  case a
  case b
}

struct Menu2: View {
  @State private var isShowModally = false
  @State private var nextModalView2 = NextModalView2.none

  var body: some View {
    VStack(alignment: .center) {
      Button(action: {
        self.isShowModally = true
        self.nextModalView2 = .a
        print("self.nextModalView = \(self.nextModalView2)")
      }){ Text("View A")
      }
      Divider()
      Button(action: {
        self.isShowModally = true
        self.nextModalView2 = .b
      }){ Text("View B")
      }
      .padding(.top, 20)
    }
    .sheet(isPresented:  $isShowModally){
      Group{
        if self.nextModalView2 == .a {
          //        case NextModalView2.a:
          AnyView(Text("A"))
        }
        if  self.nextModalView2 == NextModalView2.b{
          AnyView(Text("B"))
        }
        if self.nextModalView2 == NextModalView2.none{
          AnyView(EmptyView())
        }
      }
    }
  }
}

The .sheet() modifier is configured when your view comes onto the screen. So on init() the .sheet() will return .none. The solution is to avoid switching on the content within the sheet closure. I provided 2 super simple solutions for this here: https://stackoverflow.com/questions/65416673/multiple-bottom-sheets-the-content-doesnt-load-swiftui/65416999#65416999 — nicksarno, Jan 11 '21 at 05:17

score 1 · Answer 1 · answered Jan 11 '21 at 02:45

We need to use sheet(item: modifier in such scenario, it works per-selection.

Here is a solution. Tested with Xcode 12.1 / iOS 14.1.

enum NextModalView2: Identifiable{
    var id: NextModalView2 { self }
    case none
    case a
    case b
}

struct Menu2: View {
    @State private var nextModalView2: NextModalView2?
    
    var body: some View {
        VStack(alignment: .center) {
            Button(action: {
                self.nextModalView2 = .a
                print("self.nextModalView = \(self.nextModalView2 ?? .none)")
            }){ Text("View A")
            }
            Divider()
            Button(action: {
                self.nextModalView2 = .b
            }){ Text("View B")
            }
            .padding(.top, 20)
        }
        .sheet(item: $nextModalView2){ item in
            switch item {
            case .a:
                Text("A")
            case .b:
                Text("B")
            default:
                EmptyView()
            }
        }
    }
}

this seems a good solutio. Any idea on why the debugger variable panel was not showing the right value of the property ( as properly shown in the console debugger? — onthemoon, Jan 11 '21 at 12:15

score 0 · Answer 2 · answered Jan 11 '21 at 01:13

My experience using sheets with SwiftUI is that you can get some really funny behaviors (especially on Catalyst). My suspicion is that the sheet gets rendered at first run (when your value is none) and then doesn't actually get called to update when your @State variable changes like it should, probably because under the covers, the sheet is wrapped in something like a UIViewControllerRepresentable and the values aren't getting passed when you think they will.

I extracted your sheet view and changed the parameter to a @Binding, even though you may not need two-way communication, since it seems to fix this behavior:


enum NextModalView2 {
  case none
  case a
  case b
}

struct ContentView: View {
  @State private var isShowModally = false
  @State private var nextModalView2 = NextModalView2.none
    
  var body: some View {
    VStack(alignment: .center) {
      Button(action: {
        self.nextModalView2 = .a
        self.isShowModally = true
        print("self.nextModalView = \(self.nextModalView2)")
      }){ Text("View A")
      }
      Divider()
      Button(action: {
        self.nextModalView2 = .b
        self.isShowModally = true
      }){ Text("View B")
      }
      .padding(.top, 20)
    }
    .sheet(isPresented:  $isShowModally){
        SheetContent(nextModalView2: $nextModalView2)
    }
  }
}

struct SheetContent : View {
    @Binding var nextModalView2 : NextModalView2
    
    var body: some View {
        Group{
          if self.nextModalView2 == .a {
            AnyView(Text("A"))
          }
          if  self.nextModalView2 == NextModalView2.b{
            AnyView(Text("B"))
          }
          if self.nextModalView2 == NextModalView2.none {
            AnyView(EmptyView())
          }
        }
    }
}

State variable value is being lost

2 Answers2