web-dev-qa-db-fra.com

Comment mettre à jour un objet en état de réaction

J'ai une liste indexée de users dans l'objet JS (pas tableau). Cela fait partie de l'état de réaction.

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

Quelle est la meilleure pratique pour:

  1. ajoute un nouvel utilisateur {id: 4, nom: "Jane"} avec id (4) comme clé
  2. supprimer un utilisateur avec l'id 2
  3. changer le nom de l'utilisateur n ° 2 en "Peter"

Sans aides immuables. J'utilise Coffeescript et Underscore (donc _.extend est ok ...).

Merci.

javascriptreactjscoffeescript
17
Martin Sojka

C'est ce que je ferais 

  • ajouter: var newUsers = _.extend({}, users, { 4: { id: 4, ... } })
  • supprimer: var newUsers = _.extend({}, users) puis delete newUsers['2']
  • changer: var newUsers = _.extend({}, users) puis newUsers['2'].name = 'Peter'
9
kavun

Si vous n'utilisez pas Flux, vous utilisez this.setState () pour mettre à jour l'objet state.

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);
}

Ensuite, vous pouvez exécuter vos cas de test avec ceci:

addChangeUser(4, 'Jane);
addChangeUser(2, 'Peter');
delUser(2);
5
Kelly Keller-Heikkila

En plus de _.extend, vous pouvez utiliser Map pour stocker 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
2
Rohit Singh Sengar

Utilisation de spreads:

Ajouter

this.setState({
  ...this.state,
  4: { id: 4, name: "Jane" },
}

Enlever l'identifiant 2

let prevState = this.state;
let {"2": id, ...nextState} = prevState;
this.setState({
  ...nextState,
}

Changer d'identifiant 2

this.setState({
  ...this.state,
  2: {
    ...this.state["2"],
    name: "Peter",
  }
}
0
Asthmatic

setState accepte également une fonction, que vous trouverez peut-être plus intuitive

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

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

Ces fonctions supposent que votre objet state est votre objet users. S'il s'agit en fait de state.users, vous devez sélectionner users out, le fait de passer une fonction à setState sera toujours appelé à transmettre l'objet state réel.

Dans cet exemple, add peut également être utilisé pour modifier. Selon votre cas d'utilisation actuel, vous pouvez créer des aides distinctes.

0
Matt Styles