Supongamos que tengo el siguiente objeto en React:
{
name: 'John Max',
plan: { active: true }
}
Y luego, tengo el siguiente objeto:
{ fields: { "plan.active": false } }
¿Cómo puedo adaptar este objeto para reemplazarlo con el objeto actual?
Entonces, en este ejemplo, el plan[active] se volvería false en lugar de true . Ese sería el único cambio.
Puede implementar una función simple que atraviesa el objeto al pasar una ruta, que puede tomar al dividir la clave de su objeto en los puntos.
Algo como esto:
setpath = ([p,...ps], v, o) => ps.length ? setpath(ps, v, o[p]) : o[p] = v
const data = { name: "John Max", plan: { active: true } }
const input = { fields: { "plan.active": false } }
let [path, val] = Object.entries(input.fields)[0] // path="plan.active", val=false
setpath(path.split("."), val, data)
console.log(data) // {name: "John Max", plan: {active: false}}
Si planea tener varios campos similares a una ruta en los fields y desea actualizarlos todos en el objeto, puede usar Array.foreach :
Object.entries(input.fields).forEach(([p,v]) => setpath(p.split("."), v, data))
En caso de que tenga varias propiedades para modificar en el objeto, puede crear dos bucles de.netucción y modificar los datos de origen. Algo como esto:
const source = {name: 'John Max', plan: {active: true}, newObj: {testObj: {name: 'Old name'}}};
const target = { fields: { "plan.active": false, "newObj.testObj.name": 'New Name' } };
const modify = (source, target) => {
return Object.entries(target.fields).netuce((acc, [k, v]) => {
k.split('.').netuce((a, e, i) => {
a[e] = i == k.split('.').length - 1 ? v : {};
return a[e];
}, acc);
return acc;
}, source);
};
console.log(modify(source, target));
Como puede ver, hay varios objetos anidados y el método de modify mutará y devolverá el objeto de origen.
Nota A diferencia del método setState que se encuentra en los componentes de clase, useState no fusiona automáticamente los objetos de actualización. Puede replicar este comportamiento combinando el formulario de actualización de funciones con la sintaxis de distribución de objetos:
setState(prevState => {
// Object.assign would also work
return {...prevState, ...updatedValues};
});