Réagir: Comment puis-je mettre à jour l'état.l'article[1] sur setState? (avec JSFiddle)

Mauvais sens!

handleChange = (e) => {
    const { items } = this.state;
    items[1].name = e.target.value;

    //update state
    this.setState({
        items,
    });
};

Comme l'ont souligné beaucoup des meilleurs développeurs dans les commentaires: la mutation de l'état est mauvais!

M'a fallu un certain temps pour comprendre cela. Ci-dessus fonctionne, mais il ôte le pouvoir de Réagir. Par exemple componentDidUpdate ne verrez pas cela comme une mise à jour parce qu'il est modifié directement.

Donc le droit chemin serait:

handleChange = (e) => {
    this.setState(prevState => ({
        items: {
            ...prevState.items,
            [prevState.items[1].name]: e.target.value,
        },
    }));
};

À modifier profondément imbriqués les objets/variables dans le Réagissent de l'état, en général, trois méthodes sont utilisées: la vanille JS Object.assign, l'immutabilité-helper et cloneDeep de Lodash. Il y a aussi beaucoup d'autres moins populaires tiers libs pour atteindre cet objectif, mais dans cette réponse, je vais couvrir seulement ces trois options. Aussi, il existe quelques méthodes qui utilisent rien d'autre que la vanille JavaScript, comme la matrice de diffusion, (voir @mpen, en réponse par exemple), mais ils ne sont pas très intuitif, facile à utiliser et capable de gérer toutes les manipulation de l'état situations.

Comme l'a souligné à maintes reprises dans le top voté commentaires, réponses, dont les auteurs proposent une mutation directe de l'etat, il suffit de ne pas le faire. C'est un omniprésente Réagir anti-modèle, qui sera inévitablement vous conduire à des conséquences indésirables. Apprendre la bonne façon.

Nous allons comparer trois méthodes couramment utilisées.

Compte tenu de cette structure de l'etat:

state = {
    foo: {
        bar: 'initial value'
    }
}

1. Vanille JavaScript de l'Objet.attribuer

(...essential imports)
class App extends Component {

    state = {
        foo: {
            bar: 'initial value'
        }
    }

    componentDidMount() {

        console.log(this.state.foo.bar) //initial value

        const foo = Object.assign({}, this.state.foo, { bar: 'further value' })

        console.log(this.state.foo.bar) //initial value

        this.setState({ foo }, () => {
            console.log(this.state.foo.bar) //further value
        })
    }
    (...rest of code)

Gardez à l'esprit que Objet.attribuer de ne pas exécuter une profonde clonage, depuis il copie seulement les valeurs de propriété, et c'est pourquoi ce qu'il fait est appelé un peu profonde de la copie (voir les commentaires).

Pour que cela fonctionne, il faut manipuler cet objet de niveau supérieur éléments (state.foo). Et leurs valeurs (state.foo.bar) doit être primitive (chaînes de caractères, nombres, booléens).

Dans cet exemple, nous créons une nouvelle constante (const foo...), à l'aide de Object.assign, ce qui crée un objet vide ({}), des copies state.foo objet ( { bar: 'initial value' } ), et ensuite des copies d'un objet différent { bar: 'further value' } sur elle. Donc, en fin de compte, le nouvellement créé foo constante tiendra une valeur de { bar: 'further value' } depuis le bar propriété ai remplacée. Cette foo est une nouvelle marque de l'objet, qui n'est pas lié à l'état d'objet, de sorte qu'il peut être muté selon les besoins et l'état ne changera pas.

La dernière partie est d'utiliser setState() setter pour remplacer l'original state.foo dans l'état nouvellement créé foo objet.

Maintenant, imaginons que nous ayons une plus profonde de l'état comme state = { foo: { bar: { baz: 'initial value' } } }. Nous pourrions essayer de créer un nouveau foo objet et de le remplir avec le foo contenu de l'état, mais Object.assign ne sera pas en mesure de copier baz de la valeur à ce nouvellement créé foo objet depuis baz est imbriqué trop profonde. Vous pouvez toujours copier bar, comme dans l'exemple ci-dessus, mais comme c'est un objet et non primitive, la référence de state.foo.bar sera copié à la place, ce qui signifie que nous allons nous retrouver avec local foo objet directement liée à l'état. Cela signifie que, dans ce cas, les mutations de l'créés localement foo affectera la state.foo objet, car ils sont en fait pointant vers la même chose.

Object.assign donc ne fonctionnera que si vous avez un moyen relativement simple à un seul niveau de profondeur la structure de l'état avec le plus profond membres titulaires de valeurs de type primitif.

Si vous avez plus profond des objets (2e niveau ou plus), que vous devriez le mettre à jour, ne pas utiliser de Object.assign. Vous risquez de la mutation de l'état directement.

2. Lodash de cloneDeep

(...essential imports)
import cloneDeep from 'lodash.clonedeep'

class App extends Component {

    state = {
        foo: {
            bar: 'initial value'
        }
    }

    componentDidMount() {

        console.log(this.state.foo.bar) //initial value

        const foo = cloneDeep(this.state.foo)

        foo.bar = 'further value'  

        console.log(this.state.foo.bar) //initial value

        this.setState({ foo }, () => {
            console.log(this.state.foo.bar) //further value
        })
    }
    (...rest of code)

Lodash de cloneDeep est beaucoup plus simple à utiliser. Il effectue profonde clonage, c'est donc une solide option si vous avez une assez complexe de l'état avec multi-niveau des objets ou des tableaux à l'intérieur. Juste cloneDeep() le niveau supérieur de la propriété de l'etat, la mutation de l'cloné partie de ce que vous s'il vous plaît, et setState() il de revenir à l'état.

3. immutabilité-helper

(...essential imports)
import update from 'immutability-helper'

class App extends Component {

    state = {
        foo: {
            bar: 'initial value'
        }
    };

    componentDidMount() {

        console.log(this.state.foo.bar) //initial value     

        const foo = update(this.state.foo, { bar: { $set: 'further value' } })  

        console.log(this.state.foo.bar) //initial value

        this.setState({ foo }, () => {
            console.log(this.state.foo.bar) //further value
        });
    }    
    (...rest of code)

immutability-helper s'en prend à un tout nouveau niveau, et le truc cool, c'est qu'elle ne peut pas seulement $set valeurs de l'état des éléments, mais aussi $push, $splice, $merge (etc.) eux. Voici une liste des commandes disponibles.

Notes

Encore une fois, gardez à l'esprit, que this.setState() modifie seulement l' de premier niveau des propriétés de l'état de l'objet (foo de propriété dans ce cas), et non pas profondément imbriqués (foo.bar). Si il se comportait d'une autre manière, cette question n'existerait pas.

Et par la manière, this.setState({ foo }) est juste un raccourci pour this.setState({ foo: foo }). Et () => { console.log(this.state.foo.bar) } après la { foo } est une fonction de callback qui est exécuté immédiatement après setState ont mis en l'état. Pratique, si vous avez besoin de faire certaines choses, après il a fait son travail (dans notre cas, pour afficher l'état immédiatement après qu'il a été défini).

Qui est droit pour votre projet?

Si vous ne voulez pas ou ne pouvez utiliser dépendances externes, et ont un simple structure de l'état, s'en tenir à Object.assign.

Si vous manipuler un immense et/ou complexe de l'état, Lodash de cloneDeep est un choix judicieux.

Si vous avez besoin d' avancé capacités de, c'est à dire si votre état de la structure est complexe et vous avez besoin d'effectuer toutes sortes d'opérations sur elle, essayez de immutability-helper, c'est un outil très avancé qui peut être utilisé pour la manipulation de l'état.

Ne pas muter l'état en place. Il peut provoquer des résultats inattendus. J'ai appris ma leçon! Toujours travailler avec un copier/cloner, Object.assign() est bonne:

item = Object.assign({}, this.state.items[1], {name: 'newName'});
items[1] = item;
this.setState({items: items});

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Selon la Réagir la documentation sur setState, à l'aide de Object.assign comme suggéré par d'autres réponses ici n'est pas l'idéal. En raison de la nature de setState's un comportement asynchrone, à la suite des appels à l'aide de cette technique peut remplacer les appels précédents provoquant des résultats indésirables.

Au lieu de cela, la Réagir docs vous recommandons d'utiliser le formulaire de mise à jour de setState qui fonctionne à l'état précédent. Gardez à l'esprit que lors de la mise à jour d'un tableau ou d'un objet vous devez renvoyer un nouveau tableau ou un objet Réagir nous oblige à préserver l'état de l'immuabilité. À l'aide de ES6 syntaxe de la propagation de l'opérateur de copie d'un tableau, la création ou la modification d'une propriété d'un objet à un index du tableau devrait ressembler à ceci:

this.setState(prevState => {
    const newItems = [...prevState.items];
    newItems[index].name = newName;
    return {items: newItems};
})

Mutation gratuit:

//given a state
state = {items: [{name: 'Fred', value: 1}, {name: 'Wilma', value: 2}]}

//This will work without mutation as it clones the modified item in the map:
this.state.items
   .map(item => item.name === 'Fred' ? {...item, ...{value: 3}} : item)

this.setState(newItems)

Essayez cela, il va certainement le travail,dans l'autre cas j'ai essayé, mais n'a pas de travail

import _ from 'lodash';

this.state.var_name  = _.assign(this.state.var_name, {
   obj_prop: 'changed_value',
});

Si vous avez besoin de changer une partie seulement de la Array,
Vous avez une réagir composant, avec état défini.

state = {items: [{name: 'red-one', value: 100}, {name: 'green-one', value: 999}]}

Il est préférable de mettre à jour le red-one dans le Array comme suit:

const itemIndex = this.state.items.findIndex(i=> i.name === 'red-one');
const newItems = [
   this.state.items.slice(0, itemIndex),
   {name: 'red-one', value: 666},
   this.state.items.slice(itemIndex)
]

this.setState(newItems)

Je voudrais déplacer la fonction gérer le changement et d'ajouter un paramètre index

handleChange: function (index) {
    var items = this.state.items;
    items[index].name = 'newName';
    this.setState({items: items});
},

à la Dynamique composant formulaire et le transmettre à la PopulateAtCheckboxes composant comme un accessoire. Comme vous vous en boucle sur vos articles, vous pouvez y ajouter un autre compteur (appelé indice dans le code ci-dessous) pour être transmis à la poignée de modifier comme indiqué ci-dessous

{ Object.keys(this.state.items).map(function (key, index) {
var item = _this.state.items[key];
var boundHandleChange = _this.handleChange.bind(_this, index);
  return (
    <div>
        <PopulateAtCheckboxes this={this}
            checked={item.populate_at} id={key} 
            handleChange={boundHandleChange}
            populate_at={data.populate_at} />
    </div>
);
}, this)}

Enfin, vous pouvez appeler votre changement d'écoute comme indiqué ci-dessous ici

<input type="radio" name={'populate_at'+this.props.id} value={value} onChange={this.props.handleChange} checked={this.props.checked == value} ref="populate-at"/>