web-dev-qa-db-fra.com

Mise à jour de l'objet tableau dans React state using immutability helper

Je mets à jour un objet dans un tableau dans React state using immutability helper .

L'objet que je souhaite modifier est imbriqué:

this.state = {
  a: {
    b: [{ c: '', d: ''}, ...]
  }
}

Je veux mettre à jour la prop c dans le nième élément de b en utilisant l'immuabilité helper.

Le code équivalent sans l'aide à l'immuabilité est:

const newState = Object.assign({}, this.state);
newState.a = Object.assign({}, newState.a);
newState.a.b = newState.a.b.slice();
newState.a.b[n] = Object.assign({}, newState.a.b[n]);
newState.a.b[n].c = 'new value';
this.setState({ newState });

Je sais que le code ci-dessus est un peu moche. Je suppose que le code utilisant l'immuabilité aide à résoudre mon problème. Merci

javascriptreactjsimmutability
21
vijayst

Une façon de le faire serait d'utiliser $set

let index = 0;
let newState = update(this.state, {
   a: {
     b: {
      [index]: {
               c: { $set: "new value"}
       }
    }
  }
});
this.setState(newState);

jsfiddle

29
QoP

Im importation de update depuis l'assistant d'immuabilité ici :)

this.state = {
  a: {
    b: [{ c: '', d: ''}, ...]
  }
} 


this.setState((prevState, props) => update(prevState, {
    a: {
        b: {
            $apply: b => b.map((item, ii) => {
                if(ii !== n) return item;
                return {
                    ...item,
                    c: 'new value'
                }
            })
        }
    }
}))
3
FlatLander