Actualmente estoy tratando de crear un formulario dinámico que use un subcomponente para representar algunos campos de entrada, ya que crearlos estáticos excedería un límite. Paso los estados para el formulario que hice, así como alguna fecha y el formulario de cambio. ¡Pero cuando renderizo el formulario como lo hace muy bien! tan pronto como cambio el estado, envía una advertencia sobre componentes no controlados que puede leer al respecto aquí
He intentado preconfigurar todos los campos con valores predeterminados vacíos, pero no ayuda.
¿Lo estoy haciendo algo correcto o totalmente mal? o cuál es la forma correcta, o qué estoy haciendo mal. gracias de antemano
En cuanto al código se ve así:
Editar.js
export default function InventoryItemEdit() { const [form, setForm] = useState({}); function handleFormChange(e) { setForm({ ...form, [e.target.name]: e.target.value }); } const variants = ( <ItemVariants form={form} onChange={handleFormChange} fields={form.sizes} /* ^^ fields data fetched from the server i set via use effect hook when loading the page */ /> ); const updateItem = async (event) => { event.preventDefault(); /* Do form submit post */ }; return ( <form onSubmit={updateItem}> <div> <p htmlFor="name">Name</p> <input id="name" name="name" onChange={handleFormChange} value={form.name} type="text" required placeholder="Name of Item" /> </div> {variants} </form> ); }En cuanto al subcomponente ItemVariants, se ve así
ItemVariants.js
export default function ItemVariants({ form = {}, onChange = '', fields = [], }) { return ( <> {fields.map((row, index) => ( <div> <span> {row.name} </span> <input type="text" id={`variant${index}`} name={`variant${index}`} onChange={onChange} value={form[`variant${index}`]} required min="0" placeholder="0" defaultValue="0" /> </div> ))} </> ); }Respuesta a su error: veo que todo está bien, pero el único problema es que no configuró el estado inicial con la clave de nombre. Ese es un problema de análisis porque en su código está haciendo [e.target.name]: e.target.value y la forma en que las entradas funcionan generalmente es que el evento se activa, pero se debe emitir un valor reciente cuando el evento ocurra a continuación. funciona como a++.
Hacer esto:
const [form, setForm] = React.useState({ name: '' });La regla general es que siempre describa las teclas de entrada de su formulario cuando sus entradas estén predefinidas y no sean dinámicas (en este caso, la entrada de su nombre está predefinida).
Entonces, después de investigar y leer esta publicación, ¡tengo que agradecer! @juliomalves para la solución con value={form[`variant${index}`] ?? ''} o value={form[`variant${index}`] || ''}
También descubrí que estaba agregando accidentalmente un valor predeterminado y un valor que no se puede establecer al mismo tiempo que lo descubrí. ¡Después de probarlo, eliminé el valor predeterminado y lo configuré correctamente para que fuera una cadena! ahora funciona como un encanto! ¡También gracias a @Emmanuel Onah por la explicación, realmente me ayudó a comprender más sobre los estados de reacción!
Gracias de nuevo por todos los que ayudaron