Comment puis-je setState pour 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 pourrais-je définir l'état de hospital_id sans paramètre le reste de l'accès?

Cela semble tout supprimer mais hospital_id:

this.setState({access: {hospital_id: 1}})
  • J'espère Réagir sort avec une meilleure façon de faire cela, comme updateState(), qui ferait que la mettre à jour les clés de passé au lieu de souffler loin de ce qui est déjà là. Je trouve l'ensemble de ces solutions de contournement dangereux parce qu'il "échoue" en silence, si quelqu'un oublie de fusionner la nouvelle de l'état avec l'état existant.
  • comment est-ce un tableau imbriqué?
  • Il ne l'est pas, c'est un objet imbriqué. Son vocabulaire n'est pas mon point fort.
InformationsquelleAutor Dan G Nelson | 2016-01-22
  1. 75

    Vous pouvez utiliser l'Objet.d'attribuer ou de l'objet de la propagation de la proposition de 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 atomique de mise à jour:

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

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

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

    Je voudrais utiliser la première.

    • Considérant que Réagir utilise les dernières ES + Babel (pour la plupart), ce qui devrait être la accepté de répondre. L'Objet de la propagation de l'opérateur est le plus concis et facile à grep.
    • Génial..... Aime vraiment la façon dont les œuvres ES6
    • Apparemment, cette méthode ne fonctionne pas sur Safari. Il se comporte différemment.
    InformationsquelleAutor Brigand
  2. 15

    JS:

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

    • vous ne devrait pas muter état directement
    • Depuis quand? La réagir docs ne suggèrent pas une telle règle.
    • Ne Pas Modifier l'État Directement
    • À l'aide de setState est la méthode suggérée pour la modification de l'état indirectement. Maintenant, il se peut que vous dire de laisser newAccess = Objet.attribuer({}, ce.état.l'accès); doit être utilisé, qui n'a pas eu lieu pour moi avant. Dans ce cas, je serait probablement d'accord puisque c'est le modèle que j'utilise ailleurs.
    InformationsquelleAutor J. Mark Stevens
  3. 2

    Ma façon préférée de faire ça maintenant, c'est aussi simple que:

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

    Légèrement plus simple que l'actuelle accepté de répondre.

    MODIFIER (basé sur la question de @SILENCIEUX )

    Il ressemble à ce qui est en fait un dangereux méthode. Plus de la lecture ici Réagir: Un (très bref) parler de l'immuabilité.

    Ressemble à une meilleure façon de le faire serait:

    let newAccess = Object.assign({}, this.state.access, {hospital_id:1});
this.setState({access: newAccess});
    • N'est-ce pas la mutation de l'état?
    • On dirait que vous avez raison. Mise à jour de la réponse et a changé la accepté de répondre à l'un par @FakeRainBrigand
    InformationsquelleAutor Dan G Nelson
  4. 1

    Une autre façon de le faire serait 

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

    Utilisation de la la propagation de l'opérateur crée un clone de this.state.access.

    InformationsquelleAutor twocents