0
130
VistasLa actualización de estado condicional de React no funciona
Estoy tratando de crear un formulario en el que el usuario pueda crear un curso pagado/gratis. Si se paga, elija el precio, pero si el precio es gratis = 0,
Este es mi estado predeterminado:
const [values, setValues] = useState({ name: "", description: "", category: "", price: 500, paid: true, uploading: false, loading: false, });Problema: si hago clic en un curso pagado, mi precio predeterminado es 500 , que es el primer precio de la lista de precios. Pero cuando cambio a Curso gratuito, el estado cambia a "pagado: falso" pero el último precio seleccionado se mantuvo como en la imagen a continuación
¡Alguna idea de cómo cambiar! He intentado de varias maneras pero nada funcionó. Por favor ayuda gracias❤️
Intenté cambiarlo antes de enviarlo al backend, todavía no funcionó.
const handleSubmit = async (e) => { e.preventDefault(); try { if(values.paid == false) { setValues({...values, price: 0}) } const { data } = await axios.post("/api/course/create-new-course", { ...values, image, }); router.push("/instructor"); toast.success("Continue adding lessions"); } catch (err) { console.log(err); toast.error(err.response.data); } };2 Respuestas
Responde la pregunta0
Intente actualizar su campo paid en CreateCourseForm de esta manera:
<select value={values.paid ? '1' : '0'} onChange={(e) => { const isPaid = e.target.value == '1'; setValues({ ...values, price: isPaid ? 500 : 0 , paid: isPaid }) }} className="select select-bordered select-secondary w-full lg:w-4/5 mb-3 rounded-none lg:rounded-lg" > <option value={'0'}> Free Course </option> <option value={'1'}>₹ Paid Course</option> </select>0
Llamar a setState() en React es asíncrono, por varias razones (principalmente de rendimiento). Debajo de las sábanas, React agrupará múltiples llamadas a setState() en una sola mutación de estado, y luego volverá a renderizar el componente una sola vez, en lugar de volver a renderizar para cada cambio de estado.
Afortunadamente, la solución es bastante simple: setState acepta un parámetro de devolución de llamada:
Así que prueba esto: -
const handleSubmit = async (e) => { e.preventDefault(); try { if(values.paid == false) setValues(prevValues => ({...prevValues, price: 0})); const { data } = await axios.post("/api/course/create-new-course", { ...values, image, }); router.push("/instructor"); toast.success("Continue adding lessions"); } catch (err) { console.log(err); toast.error(err.response.data); } };