• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

224
Views
¿Cómo puedo obtener valores de campos de entrada dinámicos y estructurarlos en estado de reacción js?

Desde la interfaz de usuario a continuación, quiero generar algo como esto en mi estado.

 [{title: 'Barnes Chapman', options:{extra large: '8.0', ketchup: '1.00', extra tomato: '2' } }]

ingrese la descripción de la imagen aquí

Creé una función pero la función no funciona correctamente, el estado solo se actualiza 2 veces cuando quiero actualizar el estado la tercera vez que no se actualiza, he depurado y las condiciones funcionan pero el valor anterior no se almacena y La tercera vez que el estado ya no se actualiza.

 const getIngredients = (e, product) => { setIngredients((prevValue) => { const isExist = prevValue.find((item) => item.title === product.title); console.log(isExist); console.log({ ...isExist?.options, title: e.target.name, price: e.target.value, }); if (isExist) { isExist.options = { // Problem is here previous value is not storing ...isExist.options, title: e.target.name, price: e.target.value, }; return prevValue; } return [ ...prevValue, { title: product.title, options: { title: e.target.name, price: e.target.value }, }, ]; }); };

Código JSX: los valores de las casillas de verificación son dinámicos

 {product.ingredients.map((ingredient) => { return ( <li onChange={(e) => getItemValues(e.target, product)}> <label className="container_check"> {ingredient.title} // "ketchup" <span>+ $2</span> <input type="checkbox" value={ingredient.price} // "1" name={ingredient.title} // "ketchup" /> <span className="checkmark"></span> </label> </li> ); })}
almost 3 years ago · Santiago Gelvez
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error