Estoy usando React y trato de usar el gancho setState para actualizar un valor en un objeto bastante anidado, como habrás entendido por el título 😅
Me las arreglé para que funcionara un poco, pero en lugar de obtener la matriz original de objetos que tenía antes, obtengo un objeto de índice como mi valor de retorno.
Así que mi objeto con el que estoy trabajando se parece a esto:
{ category: "" level: "" name: "" rarity: "" requirements: [ {name: "", customValue: 0 <--- that I wish to update }, {name: "", customValue: 0 }] }Cuando traté de actualizar el estado de este valor, logré reducirlo a esto. El índice de la propiedad es conocido.
setItemUpdated((prev) => ({ ...prev, requirements: { ...prev.requirements, [idx]: { ...prev.requirements[idx], customValue: val } }, }));Esto funciona, hasta cierto punto. Pero en lugar de [ {}, {} ] obtengo [ 1:{} 2:{} ]. Entiendo por qué obtengo esto, ya que estoy configurando los primeros requisitos como un objeto, sin embargo, cuando intento envolver el interior con una matriz, nunca obtengo nada para compilar. Realmente no sé cómo sería la sintaxis para eso.
Traté de buscar un hilo similar aquí en SO que sin duda existe, pero simplemente no pude encontrar nada. ¡Espero que me puedas ayudar aquí!
¡Gracias de antemano!
La solución de mano larga es simplemente cortar la matriz antes y después del índice y distribuir el objeto en el índice.
setItemUpdated((prev) => ({ ...prev, requirements: [ ...prev.requirements.slice(0, idx), { ...prev.requirements[idx], customValue: val }, ...prev.requirements.slice(idx + 1), ], }));en realidad estaba trabajando con algo similar en este momento, el proceso que estoy haciendo es copiar los datos de estado, editándolos en función de la entrada (en su caso, llamada anterior). Lanzando una posible respuesta rápida aquí ya que acabo de ver esta pregunta.
const data = { ...useStateData.data }; data[input.name] = input.value; setUseStateData({ data});Por lo tanto, es posible que deba hacer algo como:
data.requirements['name'] = updatedvalue;Espero que ayude -
Como ya mencionó, está tratando de distribuir una matriz dentro de un objeto, lo que, como resultado, llena el objeto con los pares de índice/valor de la matriz.
En cambio, haría algo como seguir (de manera inmutable):
setItemUpdated(prev => ({ ...prev, requirements: prev.requirements.map((prevRequirement, index) => index === idx ? {...prev.requirements[idx], customValue: val} : prevRequirement ), })); Que esencialmente mapea sobre los prev.requirements y si encuentra el índice conocido, reemplaza/modifica ese objeto, de lo contrario, devuelve el prevRequirement de la matriz