De acuerdo, tengo una pregunta: ¿por qué cuando alguien hace clic en varias respuestas seleccionadas, almacena todo el valor en lugar de almacenar solo el último valor?
Así que digamos que tengo una selección con solo 2 opciones
Y luego hago clic en la opción 1, pero decidí cambiar a la opción 2 en el último minuto. ¿Por qué guarda ambos datos/información en la base de datos?
Como puede ver, imprime ambas escuelas ("colegios") porque hice clic en ambas en la selección.
Este es el fragmento de código que es relevante, avíseme si necesita el código completo.
const [idType1, setidType1] = useState([]); const register = (e) => { e.preventDefault(); const docRef = db.collection('usuarios').doc(user.uid).collection('estudiantes').doc(); docRef.set({ name: firstName + " " + lastName, school: idType1, grade: idType2, uid: docRef.id, }).then((r) => { history.push("/Inicio"); }) } <select className = "crear_escuela" onChange = {(e) => setidType1([...idType1, e.target.value])} required> <option value="" disabled selected hidden>Seleccione...</option> <option value = 'Academia Internacional de Boquete' label = 'Academia Internacional de Boquete' /> <option value = 'Academia Internacional de David' label = 'Academia Internacional de David' /> </select>El problema está en onChange = {(e) => setidType1([...idType1, e.target.value]) .
Cada vez que cambia el valor en la select , agrega el valor seleccionado a idType1 . Dado que se trata de un menú desplegable, normalmente querrá reemplazar el valor existente de idType1 con el valor recién seleccionado.
Asi que:
onChange = { (e) => setidType1(e.target.value) }