web-dev-qa-db-fra.com

Pourquoi un tableau ObservedObject n'est pas mis à jour dans mon application SwiftUI?

Je joue avec SwitUI, essayant de comprendre comment fonctionne ObservableObject. J'ai un tableau d'objets Person. Lorsque j'ajoute une nouvelle personne dans le tableau, elle est rechargée dans ma vue. Cependant, si je modifie la valeur d'une personne existante, elle n'est pas rechargée dans la vue

//  NamesClass.Swift
import Foundation
import SwiftUI
import Combine

class Person: ObservableObject,Identifiable{
    var id: Int
    @Published var name: String

    init(id: Int, name: String){
        self.id = id
        self.name = name
    }

}

class People: ObservableObject{
    @Published var people: [Person]

    init(){
        self.people = [
            Person(id: 1, name:"Javier"),
            Person(id: 2, name:"Juan"),
            Person(id: 3, name:"Pedro"),
            Person(id: 4, name:"Luis")]
    }

}

struct ContentView: View {
    @ObservedObject var mypeople: People

    var body: some View {
        VStack{
            ForEach(mypeople.people){ person in
                Text("\(person.name)")
            }
            Button(action: {
                self.mypeople.people[0].name="Jaime"
                //self.mypeople.people.append(Person(id: 5, name: "John"))
            }) {
                Text("Add/Change name")
            }
        }
    }
}

Si je décommente la ligne pour ajouter une nouvelle personne (John), le nom de Jaime s'affiche correctement. Cependant, si je change simplement le nom, cela ne s'affiche pas dans la vue.

J'ai peur de faire quelque chose de mal ou peut-être que je ne comprends pas comment les ObservedObjects fonctionnent avec les tableaux.

Toute aide ou explication est la bienvenue!

swiftui
28
jarnaez

Person est une classe, c'est donc un type de référence. Lorsqu'il change, le tableau People reste inchangé et donc rien n'est émis par le sujet. Cependant, vous pouvez l'appeler manuellement pour lui faire savoir:

Button(action: {
    self.mypeople.objectWillChange.send()
    self.mypeople.people[0].name="Jaime"    
}) {
    Text("Add/Change name")
}

Alternativement (et de préférence), vous pouvez utiliser une structure au lieu d'une classe. Et vous n'avez pas besoin de vous conformer à ObservableObject, ni d'appeler manuellement .send ():

import Foundation
import SwiftUI
import Combine

struct Person: Identifiable{
    var id: Int
    var name: String

    init(id: Int, name: String){
        self.id = id
        self.name = name
    }

}

class People: ObservableObject{
    @Published var people: [Person]

    init(){
        self.people = [
            Person(id: 1, name:"Javier"),
            Person(id: 2, name:"Juan"),
            Person(id: 3, name:"Pedro"),
            Person(id: 4, name:"Luis")]
    }

}

struct ContentView: View {
    @ObservedObject var mypeople: People = People()

    var body: some View {
        VStack{
            ForEach(mypeople.people){ person in
                Text("\(person.name)")
            }
            Button(action: {
                self.mypeople.people[0].name="Jaime"
            }) {
                Text("Add/Change name")
            }
        }
    }
}
38
kontiki

Pour ceux qui pourraient trouver cela utile. Il s'agit d'une approche plus générique de la réponse de @kontiki.

De cette façon, vous n'aurez pas à vous répéter pour différents types de classe de modèle

import Foundation
import Combine
import SwiftUI

class ObservableArray<T>: ObservableObject {

    @Published var array:[T] = []
    var cancellables = [AnyCancellable]()

    init(array: [T]) {
        self.array = array

    }

    func observeChildrenChanges<T: ObservableObject>() -> ObservableArray<T> {
        let array2 = array as! [T]
        array2.forEach({
            let c = $0.objectWillChange.sink(receiveValue: { _ in self.objectWillChange.send() })

            // Important: You have to keep the returned value allocated,
            // otherwise the sink subscription gets cancelled
            self.cancellables.append(c)
        })
        return self as! ObservableArray<T>
    }


}

class Person: ObservableObject,Identifiable{
    var id: Int
    @Published var name: String

    init(id: Int, name: String){
        self.id = id
        self.name = name
    }

} 

struct ContentView : View {
    //For observing changes to the array only. 
    //No need for model class(in this case Person) to conform to ObservabeObject protocol
    @ObservedObject var mypeople: ObservableArray<Person> = ObservableArray(array: [
            Person(id: 1, name:"Javier"),
            Person(id: 2, name:"Juan"),
            Person(id: 3, name:"Pedro"),
            Person(id: 4, name:"Luis")])

    //For observing changes to the array and changes inside its children
    //Note: The model class(in this case Person) must conform to ObservableObject protocol
    @ObservedObject var mypeople: ObservableArray<Person> = try! ObservableArray(array: [
            Person(id: 1, name:"Javier"),
            Person(id: 2, name:"Juan"),
            Person(id: 3, name:"Pedro"),
            Person(id: 4, name:"Luis")]).observeChildrenChanges()

    var body: some View {
        VStack{
            ForEach(mypeople.array){ person in
                Text("\(person.name)")
            }
            Button(action: {
                self.mypeople.people[0].name="Jaime"
                //self.mypeople.people.append(Person(id: 5, name: "John"))
            }) {
                Text("Add/Change name")
            }
        }
    }
}
7
Networks

Je pense qu'il existe une solution plus élégante à ce problème. Au lieu d'essayer de propager le message objectWillChange dans la hiérarchie du modèle, vous pouvez créer une vue personnalisée pour les lignes de la liste afin que chaque élément soit un @ObservedObject:

struct PersonRow: View {
    @ObservedObject var person: Person

    var body: some View {
        Text(person.name)
    }
}

struct ContentView: View {
    @ObservedObject var mypeople: People

    var body: some View {
        VStack{
            ForEach(mypeople.people){ person in
                PersonRow(person: person)
            }
            Button(action: {
                self.mypeople.people[0].name="Jaime"
                //self.mypeople.people.append(Person(id: 5, name: "John"))
            }) {
                Text("Add/Change name")
            }
        }
    }
}

En général, la création d'une vue personnalisée pour les éléments dans une liste/pour chaque permet à chaque élément de la collection d'être surveillé pour les modifications.

5
Stuart Malone