Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

154
Views
¿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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!