Remplacer un objet dans le tableau sur l'état réagir

Cette question peut tomber un peu sur le côté d'une "meilleure pratique" en question, mais s'il vous plaît garder avec moi.

Voici une partie de mon état:

this.state = {
  typeElements: {
    headers: [
        {
          name: "h1",
          size: 70,
          lineHeight: 1.25,
          kearning: 0,
          marginAfter: 0
        }, {
          name: "h2",
          size: 70,
          lineHeight: 1.25,
          kearning: 0,
          marginAfter: 0
        }, {
          name: "h3",
          size: 70,
          lineHeight: 1.25,
          kearning: 0,
          marginAfter: 0
        }...

Ce que je dois faire est de REMPLACER l'objet à un index donné sur les en-têtes de tableau.

Je ne sais pas comment le faire avec la méthode setState comme dans this.setState(headers[1] = {obj}) - mais évidemment c'est non valide. Ma méthode actuelle est la création d'un nouveau tableau et de casser l'ancien comme ceci:

_updateStyle(props) {
  let newState = Object.assign({}, this.state)
  newState.typeElements.headers[props.index] = props
  this.setState(newState)
};

Pour ma petite hacky projet, je suppose que c'est OK mais j'ai l'impression que c'est super lourd et pourrait rapidement conduire à des problèmes de performances en tout genre de l'échelle.

OriginalL'auteur motleydev | 2016-10-06

11

Mise à jour: depuis cette réponse n'en est toujours upvotes, sachez que la précédente réponse ci-dessous est obsolète avec moderne JavaScript et de Réagir. La "mise à jour" addon est maintenant héritage et "l'immutabilité-helper" peut être utilisé à la place.

La Réagir docs également mentionner les raisons pour lesquelles l'immuabilité est important afin d'éviter la mutation de l'état. Pour immuable mises à jour que vous pouvez utiliser Object.assign() ou la propagation de la syntaxe qui doit être fait pour chaque niveau d'imbrication, comme dans cet exemple, le imbriquée headers objet et de ses éléments de tableau. Dans cet exemple, vous pouvez utiliser le tableau de l'indice de la clé, donc il est également possible d'utiliser la propagation de l'opérateur de faire un clone simple de la matrice et affecter un nouvel objet comme valeur à l'indice donné dans la cloné tableau.
```
_updateStyle (props) {
  const { typeElements } = this.state;
  const updatedHeaders = [...typeElements.headers];
  updatedHeaders[props.index] = props;
  this.setState({
    ...this.state,
    typeElements: {
      ...typeElements,
      headers: updatedHeaders
    }
  ));
}
```
Une autre solution qui ne nécessite pas la propagation de la syntaxe et est nécessaire si nous ne sommes pas à l'aide de l'index de tableau pour trouver l'objet que nous voulons remplacer, à l'aide de array.map pour créer un nouveau tableau et en retournant le nouvel objet à la place de l'ancien à l'index donné.
```
  const updatedHeaders = typeElements.headers.map((obj, index) => {
    return index === props.index ? props : obj;
  });
```
Exemples similaires dans le Redux docs aussi expliquer "immuable mise à jour des modèles".
Réagir a certains immutabilité des aides pour ce qui est expliqué dans
les docs: https://facebook.github.io/react/docs/update.html

Dans votre cas, vous pouvez utiliser le $épissure de commande pour supprimer un élément et
l'ajout de la nouvelle à l'indice donné, par exemple:
```
_updateStyle (props) {
  this.setState(update(this.state.typeElements, 
    { $splice: [[props.index, 1, props]] }
  ));
}
```
aha, j'étais au courant de ces mais n'était pas sûr de ux de mettre en œuvre, il va dans la méthode setState? Quel est le "1"? C'est que le point d'insertion de l'objet nouveau? Pourrais-je ne pas utiliser seulement les accessoires.indice de nouveau pour ça, si c'est le cas?
Découvrez le tableau.méthode splice () developer.mozilla.org/nl/docs/Web/JavaScript/Reference/... et vous comprendrez... le tableau contient les arguments passés à la jonction de la méthode, de sorte que le "1" dans cet exemple est la deleteCount.

OriginalL'auteur Robin Venneman
2

utilisation l'immutabilité-helper

vous pouvez trouver de très bons exemples, il y

OriginalL'auteur ChaosPredictor
0

Objet.Attribuer utilise la copie superficielle, pas de copie en profondeur.

S'il vous plaît être conscient que dans votre exemple Object.assign({}, this.state) copie uniquement les liens vers le plus proche des enfants de la state, c'est à dire à typeElements, mais headers tableau n'est pas copié.

Il est un sucre syntaxique ... dans l'ES6 pour l'Objet.Céder, Babel, c'est le addon transformer-objet-repos-propagation.
```
let newHeaders = { ...this.state.typeElements.headers};
newHeaders[index] = props.Something;

let newState = {...state, typeElements: { newHeaders }};
```
Vraiment? Il fait réellement copier les en-têtes pour moi aussi. Pouvez-vous développer?
L'Objet.méthode assign() seules les copies énumérable et propriétés d'un objet source vers un objet cible (MDN developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...). Cela signifie qu'il ne copie que les références de la plus proche des objets ou des valeurs primitives (nombres, chaînes de caractères). Vous obtenez le vieux tableau dans votre application et si vous les transformer ensuite, il sera également affecter d'autres endroits où il est en cours d'utilisation.
Oh, ce n'est pas bon. Merci pour le pointeur!

OriginalL'auteur Artru

Offrant une meilleure explication de la façon d'accomplir ceci.

Tout d'abord, trouver l'indice de l'élément à remplacer dans le tableau de l'état.
Deuxième, update l'élément à l'index
Troisième, appel setState avec la nouvelle collection

import update from 'immutability-helper';

//this.state = { employees: [{id: 1, name: 'Obama'}, {id: 2, name: 'Trump'}] } 

updateEmployee(employee) {
    const index = this.state.employees.findIndex((emp) => emp.id === employee.id);
    const updatedEmployees = update(this.state.employees, {$splice: [[index, 1, employee]]});  //array.splice(start, deleteCount, item1)
    this.setState({employees: updatedEmployees});
}

OriginalL'auteur daino3

Vous devez vous connecter pour publier un commentaire.