Si tenemos una matriz que contiene objetos que contienen cada uno y una matriz de etiquetas como se muestra a continuación:
const arr = [ { 0: { name: 'Apple', tags: ['fruit', 'green'] } }, { 1: { name: 'ball', tags: ['round'] } }, { 2: { name: 'cat', tags: ['grey', 'meow', 'treats'] } } ];¿Es posible usar ganchos de reacción para actualizar la matriz de etiquetas? Estaba intentando algo como esto, pero me confundí:
setArr((prev => ([...prev, ({...prev[id], [...prev[id]['tags'], prev[id]['tags']: newArrOftags ]})], ));Aquí está la sintaxis más simple que usaría para apuntar a un elemento específico en su matriz, dado que conoce el valor numérico utilizado dentro de ese elemento, y luego actualiza el estado anterior dentro de su enlace useState:
const lookup = 1; // Using the correct number value to target ball const newItem = 'Additional ball tag here'; setArr((prevArr) => { const newArr = prevArr.map((item) => { if (item[lookup]) { item[lookup].tags = [...item[lookup].tags, newItem]; } return item; }); return newArr; });En lugar de usar una sintaxis abreviada que es un poco compleja en su caso, esto es lo que necesita. Estoy recorriendo la matriz usando el mapa y encontrando el objeto con id. Luego agrega las etiquetas a la matriz de etiquetas de ese objeto. En el ejemplo, estoy agregando algunas etiquetas a un objeto con id 1.
let arr = [ { 0: { name: 'Apple', tags: ['fruit', 'green'] } }, { 1: { name: 'ball', tags: ['round'] } }, { 2: { name: 'cat', tags: ['grey', 'meow', 'treats'] } } ]; const id = 1; const tags = ["test1","test2","test3"] arr = arr.map((a)=>{ if(Object.keys(a).includes(id.toString())) { a[id].tags = [...a[id].tags,...tags]; } return a; }) Utilice la lógica anterior en lugar del operador de propagación para establecer el estado. map devuelve una nueva matriz, por lo que es seguro usarlo para actualizaciones de estado.
Aquí hay un ejemplo de la lógica: https://stackblitz.com/edit/js-xqnjai