Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

155
Vistas
¿Cómo mostrar solo el nuevo envío usando el formulario en React en lugar de mostrar también los envíos anteriores?

Estaba trabajando en un formulario de entrada múltiple donde enviamos la consulta y se muestra la consulta enviada. Después del envío, todos los campos vuelven a estar en blanco. Si realizo otro envío para otro campo, la pantalla muestra el nuevo envío, pero también muestra el valor del envío anterior del campo anterior. No estoy seguro si me estoy explicando bien. Todavía me cuesta entender muchos conceptos dentro de reaccionar. Aquí está mi código de formulario:

 export default function Form({searchQuery}) { const [query, setQuery] = useState({ firstName: "", lastName: "", }); const handleChange = (event) => { setQuery({ ...query, [event.target.name]: event.target.value }); }; const handleSubmit = (event) => { event.preventDefault(); searchQuery(query); setQuery({ firstName: "", lastName: "",}); }; return ( <div className="form-container"> <form onSubmit={handleSubmit}> <div> <input type="text" name="firstName" placeholder="Search by First Name" value={query.firstName} onChange={handleChange} /> </div> <div> <input type="text" name="lastName" placeholder= "Search by Last Name" value={query.lastName} onChange={handleChange} /> <div> <button>Search</button> </div> </form> </div> ); }

Y aquí está el componente que muestra estas consultas:

 function SubmittedData() { const [query, setQuery] = useState([ {firstName: "", lastName: "", }]); const searchQuery = (query1) => { setQuery([ { firstName: query1.firstName, lastName: query1.lastName, } ]); }; return ( <div className="App"> <FormMemberSearch searchQuery ={searchQuery} /> { query.map(query => { return ( <div> {query.firstName} {query.lastName} </div> ) }) } </div> ); } export default SubmittedData;

Cuando envío "Ana" como primer nombre y dejo vacío el campo Apellido, solo aparece Ana. Si ingreso Celly como primer nombre, solo mostrará Celly, lo cual está bien. Pero después de ese envío, si ingreso algo como "Delvey" para el apellido y envío el formulario, el resultado será Celly Delvey. ¿Cómo hago para que muestre solo Delvey en lugar del valor de otro campo del envío anterior?

Gracias.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda