Estoy luchando por descubrir cuál es la mejor práctica para modificar cada valor en una matriz de objetos usando el asistente de inmutabilidad .
Por ejemplo, si tuviera esto en mi estado:
this.state = { items: [ { name: "test", subItems: [ {val: false}, {val: true}, {val: false} ] }, { name: "test2", subItems: [ {val: true}, {val: true}, {val: false} ] } ] } Y quiero establecer cada val en false , ¿cómo podría hacerlo?
Podría hacerlo uno a la vez, pero debe haber una mejor manera:
let elements = update(this.state.items, { [idx1]:{ subItems:{ [idx2]:{ val: { $set: false } } } } });Ciertamente es posible, pero es todo menos legible o comprensible a primera vista.
const nextState = update(state, { items: { $apply: (items) => { return items.map(item => { return update(item, { subItems: { $apply: (subItems) => { return subItems.map(subItem => { return update(subItem, { val: { $set: false } }) }) } } }) }) } } });Para una solución ES6 con inmutabilidad, desestructuración y sin ayudantes:
this.setState({ // This is if you have other state besides items. ...this.state, items: this.state.items.map(item => ({ ...item, subItems: item.subItems.map(subItem => ({ ...subItem, val: false // or eg setter as a function of (item, subItem) })) })) });es más fácil para mí que el asistente de actualización.
prueba esto
this.state = { items: [ { name: "test", subItems: [ {val: false}, {val: true}, {val: false} ] }, { name: "test2", subItems: [ {val: true}, {val: true}, {val: false} ] } ] }usar programación funcional
this.state.items .filter((item) => item.name === test).subitems .map((subItem) => { subitem.forEach( (key) => { { [key]: !subitem[key] } }) })