He estado tratando de depurar esto durante horas y miré todas las demás preguntas de desbordamiento de pila que tienen el mismo estilo de problema, pero todas solo dicen que use claves y eso todavía no funciona para mí. He hecho un ejemplo más simple de mi código que replica el error.

 import React from 'react' import { useState } from 'react' const FormTest = () => { const [name, setName] = useState('') const TestExperience = (props) => { return (<div> <h1>Test Experience {props.num}</h1> <input type="text" name="name" placeholder="Name" /> </div>) } const processFormData = (event) => { event.preventDefault(); console.log(event.target); } const [nums, setNums] = useState([1, 2, 3]); const arr = nums.map((num, index) => <TestExperience num={num} key={index}/>); return ( <div> <form onSubmit={(event) => { processFormData(event); }}> {arr} <button onClick={() => { setNums([...nums, nums.length + 1]); }}>Add one!</button> </form> </div> ) } export default FormTest

Intenté mover TestExperience a su propia función separada. Básicamente, estoy tratando de tener entradas de las que uno pueda crear más, y este problema de perder el foco surgió del hecho de que cada vez que se agregaba una entrada, todos los formData existentes desaparecían debido a una nueva representación. El objetivo sería simplemente usar la función onSubmit para analizar los datos, pero dado que desaparece después de agregar la entrada, pensé que necesitaba almacenarla. He estado yendo por madriguera tras madriguera tratando de arreglar lo que parece un problema tan simple y sigo encontrando problemas con cada implementación que intento.

El objetivo general es que tengo un botón de enviar y un botón de agregar entrada, y traté de deshacerme de todo value={stateVariable} y onChange={setStateVariable} y simplemente convertir el botón de entrada en un botón de "enviar" para poder ejecute processFormData y haga cosas diferentes según el botón de envío que era, pero no tengo idea de cómo verificar de qué botón proviene el envío cuando hay dos botones diferentes, por lo que una respuesta a eso también podría ser muy útil porque entonces puedo evitar todo este lío estatal.