web-dev-qa-db-fra.com

Comment définir setState pour un objet imbriqué?

Pour un plugin que j'utilise, je dois avoir un état qui ressemble à ceci:

getInitialState() {
  return {
    invalid: true,
    access: {
      access_code: '',
      zipcode: '',
      password: '',
      confirm: '',
      hospital_id: '',
    },
  }
},

Comment définir l'état de hospital_id sans définir le reste de l'accès?

Cela semble supprimer tout sauf hospital_id:

this.setState({access: {hospital_id: 1}})
javascriptreactjsreact-native
28
Dan G Nelson

Vous pouvez utiliser Object.assign ou la proposition de répartition d'objet pour créer des copies d'objets avec des propriétés mises à jour.

this.setState({
  access: {
    ...this.state.access,
    hospital_id: 1,
  },
});

this.setState({
  access: Object.assign({}, this.state.access, {
    hospital_id: 1,
  }),
});

Ou pour la version la plus courte et la mise à jour atomique:

this.setState(({access}) => ({access: {
  ...access,
  hospital_id: 1,
}});

Et une option de plus est l'addon de mises à jour:

var update = require('react-addons-update');
this.setState({
  access: update(this.state.access, {
    hospital_id: {$set: 1},
  })
});

J'utiliserais le premier.

75
Brigand
let newAccess = Object.assign({}, this.state.access);
newAccess.hospital_id = 1;
this.setState({access: newAccess});
15
J. Mark Stevens

Ma façon préférée de le faire maintenant est aussi simple que:

let newAccess = this.state.access;
newAccess.hospital_id = 1;
setState({access: newAccess});

Un peu plus simple que la réponse actuellement acceptée.

[~ # ~] modifier [~ # ~] (basé sur la question de @SILENT)

Il semble que ce soit une méthode potentiellement dangereuse. Pour en savoir plus ici Réagissez: Un (très bref) discours sur l'immuabilité.

Il semble qu'une meilleure façon de procéder serait:

let newAccess = Object.assign({}, this.state.access, {hospital_id:1});
this.setState({access: newAccess});
2
Dan G Nelson

Une autre façon de procéder serait de

const newAccess = {...this.state.access};
newAccess.hospital_id = 1;
setState({access: newAccess});

L'utilisation de opérateur d'étalement crée un clone de this.state.access.

1
twocents