Tengo un objeto que se parece a esto:
categories : [ { name: "General Information", rows: [ { information1 : "", information2 : "", } ] } ]Y estoy mostrando el contenido de las filas usando un ciclo como este:
{formData?.categories?.map(c => ( <div> {c.name} {c.rows.map((row) => ( <div> <input value={field.information1} /> <textarea value={field.information2}></textarea> <button onClick={() => addRow(c.name)}>Add Row here</button> </div> ))} </div> ))}Cuando presiono uno de estos botones (que debería agregar una fila a la matriz de filas), el estado de formData se actualiza, pero los datos mostrados no.
function addRow(category) { const updatedFormData = formData for (const cat of updatedFormData.categories) { if (cat.name === category) { cat.rows.push({ information1 : "test", information2 : "this is a test" }) } } setFormData(updatedFormData) }En la función addRow, cree una copia de formData antes de actualizarlo
function addRow(category) { const updatedFormData = {...formData}; // Make changes to updatedFormData setFormData(updatedFormData) }Necesitamos crear una copia antes de actualizar para que Reaccione sepa que el estado ha cambiado.
Considere este escenario,
const obj1 = {a : 1, b: 2}; const obj2 = obj1; obj2.b = 12; console.log(obj1 === obj2); // true obj1 y obj2 apuntan a la misma referencia de objeto. Incluso si cambiamos el valor de b , la referencia no ha cambiado. De manera similar, cuando actualizamos las categorías de formData sin crear una copia, la referencia no había cambiado y reaccionar no tiene forma de saber que el estado se ha actualizado. Así que creamos un nuevo objeto y le copiamos el contenido de formData y luego actualizamos la copia y establecemos el estado con la copia.
De los documentos oficiales :
El estado puede contener cualquier tipo de valor de JavaScript, incluidos los objetos. Pero no debe cambiar los objetos que tiene en el estado Reaccionar directamente. En cambio, cuando desea actualizar un objeto, debe crear uno nuevo (o hacer una copia de uno existente) y luego establecer el estado para usar esa copia.