reactjs - props - Actualización del objeto de matriz en estado React utilizando el ayudante de inmutabilidad

react router

Question

Estoy actualizando un objeto dentro de una matriz en estado React utilizando el ayudante de inmutabilidad .

El objeto que quiero modificar está anidado:

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

Quiero actualizar la prop c dentro del elemento n de b usando el ayudante de inmutabilidad.

El código equivalente sin el ayudante de inmutabilidad es:

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 });

Sé que el código anterior es un poco feo. Estoy asumiendo que el código que usa el ayudante de inmutabilidad resolverá mi problema. Gracias

Answer 1

Im importación update de ayudante de inmutabilidad aquí :)

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''
}
})
}
}
}))

Answer 2

Una forma de hacerlo sería usando $set

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

jsfiddle