After appending element to array it should show more elements

问题

This is how it looks before and after..

I have a ForEach Loop, and when I click on the card, it appends a new element to the array and then IT SHOULD SHOW 2 CARDS. But there is still one card. (but I appended the new card element) So what should I do?

struct TimelineFromUserView: View {
    
    var card: [Card] = cardData
    
    var body: some View {
        
        VStack {
            HStack {
                Text("History").bold()
                    .font(.largeTitle)
                    .padding(.top, 20)
                    .padding(.leading, 20)
                Spacer()
                
            }
            Divider()
            ScrollView(.vertical, showsIndicators: false) {
                
                VStack(spacing: 30) {
                    ForEach(card) { item in
                        CardForTimeline(card: item)
                            .onTapGesture {
                                    print("juhuu")
                                    cardData.append(Card(number: 2, start: "01.10.2021", end: "20.10.2021", days: 19, success: false))
                                    print(cardData)
                            }
                        .padding()
                    }
                }
                .padding(.top, 10)
            }
        }
    }
}

struct Card: Identifiable{
    
    var id = UUID()
    var number: Int
    var start: String
    var end: String
    var days: Int
    var success: Bool
}

var cardData: [Card] = [
    Card(number: 1 ,start: "05.06.2020", end: "15.06.2020", days: 10, success: true)
]

回答1:

You only pass a copy card of the array cardData into the ForEach but if I understand your code snippets correctly it should be the original array cardData.

If that's not the problem it would be helpful to post more of your code.

回答2:

I just replace CardForTimeline on Text (because I didn't have your CardForTimeline) and it return me 2 (also I replaced print(cardData) on print(cardData.count)). You can create fully new project and add this code. It will print 2, 3, 4, 5 after taps

struct ContentView: View {
    
    var card: [Card] = cardData
    
    var body: some View {
        
        VStack {
            HStack {
                Text("History").bold()
                    .font(.largeTitle)
                    .padding(.top, 20)
                    .padding(.leading, 20)
                Spacer()
                
            }
            Divider()
            ScrollView(.vertical, showsIndicators: false) {
                
                VStack(spacing: 30) {
                    ForEach(card) { item in
                        Text(verbatim: "we")
                            .onTapGesture {
                                    print("juhuu")
                                    cardData.append(Card(number: 2, start: "01.10.2021", end: "20.10.2021", days: 19, success: false))
                                print(cardData.count)
                            }
                        .padding()
                    }
                }
                .padding(.top, 10)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


struct Card: Identifiable{
    
    var id = UUID()
    var number: Int
    var start: String
    var end: String
    var days: Int
    var success: Bool
}

var cardData: [Card] = [
    Card(number: 1 ,start: "05.06.2020", end: "15.06.2020", days: 10, success: true)
]

回答3:

the problem is that SwiftUI does not know to update the view. Try writing

@State private var card: [Card] = [
    Card(number: 1 ,start: "05.06.2020", end: "15.06.2020", days: 10, success: true)
]

instead of: var card: [Card] = cardData. This should work because then you are telling SwiftUI that it should update the view whenever the value changes.

Additionally you would have to change the adding part of your code to this:

.onTapGesture {
   self.card.append(Card(number: 2, start: "01.10.2021", end: "20.10.2021", days: 19, success: false))
}

The above is an approach using a local @State property to manage the state. You could also use a observable object with an array of cards instead. This could look like this:

struct ContentView: View {
    @ObservedObject private var cardData = CardData()
    
    var body: some View {
        
        VStack {
            HStack {
                Text("History").bold()
                    .font(.largeTitle)
                    .padding(.top, 20)
                    .padding(.leading, 20)
                Spacer()
                
            }
            Divider()
            ScrollView(.vertical, showsIndicators: false) {
                
                VStack(spacing: 30) {
                    ForEach(cardData.cards) { card in
                        Text(card.id.uuidString)
                            .onTapGesture {
                                self.cardData.add(card: Card(number: 2, start: "01.10.2021", end: "20.10.2021", days: 19, success: false))
                            }
                        .padding()
                    }
                }
                .padding(.top, 10)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


struct Card: Identifiable{
    var id = UUID()
    var number: Int
    var start: String
    var end: String
    var days: Int
    var success: Bool
}

class CardData: ObservableObject {
    // store the cards and make sure its get-only from the outside
    @Published private(set) var cards = [
        Card(number: 1 ,start: "05.06.2020", end: "15.06.2020", days: 10, success: true)
    ]
    
    // MARK: - Intents for modifing the cards, add additional if needed
    
    func add(card: Card) {
        self.cards.append(card)
    }
}

I hope this will help you with your problems

来源：https://stackoverflow.com/questions/63537392/after-appending-element-to-array-it-should-show-more-elements