Mis datos tienen la siguiente forma: [{size: ["large", "medium"]}, {color: ["red", "green"]}]
Página del formulario:
const optionSubmit = (e) => { const name = e.target.name; const storeValue = { [name]: productValue }; addData(storeValue); }; página formContext :
const addData= (newData) => { setData(() => [...data, newData]); }El problema es que cuando cambio el tamaño del objeto, el ejemplo se muestra como: [ {tamaño: ["grande", "mediano"]}, {color: ["rojo", "verde"]}, {tamaño: ["grande", "mediano", "pequeño"]} ]
Quiero que esta matriz se vuelva así:
[{color: ["red", "green"]},{size: ["large", "medium", small]}]Está tomando su objeto existente y distribuyéndolo en una nueva matriz, y luego agregando los newData nuevos a esa nueva matriz también. Es por eso que ves este comportamiento.
En su lugar, puede hacer esto de un par de maneras, pero algo como esto usando Object.assign :
const addData= (newData) => { setData(() => Object.assign({}, data, newData}; } O si su newData es un objeto que solo contiene {size: []} , entonces podría hacer esto:
const addData= (newData) => { setData(() => {...data, ...newData}; } const myArr = [ {size: ["large", "medium"]}, {color: ["red", "green"]}, {size: ["large", "medium", "small"]} ]; const result = []; myArr.forEach(e=>{ const key = Object.keys(e)[0]; const i = result.findIndex(r=>Object.keys(r)[0]==key); if(i>=0){ result[i]= {...result[i],...e}; }else{ result.push(e) } }) console.log(result)