So aktualisieren Sie das Objekt im React-Status

Question

Ich habe eine indexierte Liste von users im JS-Objekt (nicht im Array). Es ist Teil des Reaktionszustands.

{ 
    1: { id: 1, name: "John" } 
    2: { id: 2, name: "Jim" } 
    3: { id: 3, name: "James" } 
} 

Was ist die beste Praxis zu:

1. einen neuen Benutzer hinzufügen {id: 4, Name: "Jane"} mit id (4) als Schlüssel
2. entfernen, um einen Benutzer mit der ID 2
3. Änderung der Name des Benutzers # 2 auf "Peter"

Ohne unveränderlichen Helfer. Ich benutze Coffeescript und Underscore (so _.extend ist ok ...).

Danke.

Answer 1

Das ist, was ich

• Add tun würde: var newUsers = _.extend({}, users, { 4: { id: 4, ... } })
• entfernen: var newUsers = _.extend({}, users) dann delete newUsers['2']
• Änderung: var newUsers = _.extend({}, users) dann newUsers['2'].name = 'Peter'

Answer 2

Wenn Sie nicht Flux verwenden, Sie Verwenden Sie this.setState(), um das Zustandsobjekt zu aktualisieren.

delUser(id) { 
    const users = this.state.users; 
    delete users[id]; 
    this.setState(users); 
} 

addChangeUser(id, name) { 
    const users = this.state.users; 
    users[id] = {id: id, name: name}; 
    this.setState(users); 
} 

Dann können Sie Ihre Testfälle mit dieser auszuführen:

addChangeUser(4, 'Jane); 
addChangeUser(2, 'Peter'); 
delUser(2); 

Answer 3

setState akzeptiert auch eine Funktion, die Sie intuitiver finden könnte

function add(user) { 
    this.setState(users => { 
    users[ user.id ] = user 
    return users 
    } 
} 

function remove(id) { 
    this.setState(users => { 
    delete users[ id ] 
    return users 
} 

Diese Funktionen setzen voraus, dass Ihr state Objekt ist Ihr users Objekt, wenn es tatsächlichistdann müssten Sie users aus wählen, eine Funktion an setState übergeben wird immer das tatsächliche state Objekt übergeben werden.

In diesem Beispiel kann add auch verwendet werden, um zu ändern, abhängig von Ihrem tatsächlichen Anwendungsfall können Sie separate Helfer erstellen. Das ist die richtige Antwort

Answer 4

Neben _.extend können Sie Map verwenden für user

let user = new Map(); 
user.set(4, { id: 4, name: "Jane" }); //adds with id (4) as key 
user.myMap.set(2, { id: 2, name: "Peter" }); // set user #2 to "Peter" 
user.delete(3); //deletes user with id 3