Hay una matriz de entradas en dos formas: 1. Vacío cuando se crea. 2. Con los valores creados desde el servidor después de la creación y el guardado. Mi código para agregar un valor para cada una de las entradas en la matriz no funciona en el segundo caso y no entiendo qué podría estar mal. En el primer caso, los valores se escriben normalmente, y en el segundo, no pasa nada.
<input defaultValue={sectionValue[i].text} value={sectionValue[i].text} onChange={(e: React.ChangeEvent<HTMLInputElement>): void => { sectionValue[i].text = e.target.value; setSectionValue([...sectionValue]); }} />Hay dos problemas:
Cada vez que cambia de estado en función del estado existente, es mejor que use el formulario de devolución de llamada de su setter de estado, porque es muy fácil para el controlador cerrar una copia obsoleta del estado ( sectionValue en su caso).
Estás rompiendo una de las reglas del estado: no modifiques directamente el estado . Está modificando directamente el sectionValue[i] . Entonces es el mismo objeto, pero con una propiedad de text diferente. Más tarde, está copiando la matriz , pero también necesita copiar el objeto. A veces sucederá que se procesa correctamente cuando haga esto, pero otras veces, a menudo, no lo hará.
Para arreglar ambos, cambie:
sectionValue[i].text = e.target.value; setSectionValue([...sectionValue]);a
setSectionValue(oldSectionValue => { const newSectionValue = [...oldSectionValue]; newSectionValue[i] = { ...oldSectionValue[i], text: e.target.value }; return newSectionValue; });Hay más de una forma de hacerlo, pero las cosas básicas son: 1. Usar la devolución de llamada y 2. Copiar tanto el objeto como la matriz.
Nota al margen: dado que sectionValue es una matriz, sugeriría usar el plural para ello ( sectionValues ).