Tengo este formulario con varias casillas de verificación y, debajo, también tengo others donde el usuario puede ingresar cualquier valor. El problema es que si ingreso un valor por segunda vez, eliminará el valor anterior ingresado por el usuario.
Suponiendo que he ingresado books para mi primer envío. Ahora, quiero volver a enviar otro valor para los others , pero esta vez serán movies . Quiero guardar en el almacén de incendios ambos valores; books y movies . El problema es que si envío movies , esto anulará los books anteriores, lo que significa que reemplazará a los books . ¿Cómo puedo evitar eso y al mismo tiempo mostrar los múltiples valores ingresados por el usuario en el campo others ?
A continuación se muestran los códigos:
const sample = (props) => { const [others, setOthers] = useState(""); const handleSubmit = (e) => { e.preventDefault(); try { const user = firestore.collection("users").doc(id); const ref = user.set( { 1: { choices, others } }, { merge: true } ); console.log(" saved"); } catch (error) { console.log(error); } }; return ( <> <form onSubmit={handleSubmit}> <FormGroup> //codes for the checkboxes here <TextField type="text" label="Others:" value={others} onChange={(e) => setOthers(e.target.value)} multiline /> </FormGroup> <button type="submit">Submit</button> <br /> </form> </> ); }; export default sample;Voy a prologar esto diciendo que no estoy familiarizado con reaccionar, pero me meto mucho con firestore. entonces la sintaxis puede ser diferente para ti.
pero lo primero que noto es que estás usando const ref = user.set para hacer el documento. esto está bien para la primera vez que crea un documento, pero si usa '.set' en un documento existente, anulará todos los datos en ese documento con lo que sea que esté intentando actualizar.
debe usar const ref = user.update para actualizar los campos en el documento.
el segundo bit es digamos que desea actualizar el campo 'otros'. aún anularía los datos en ese campo incluso si usa '.update'. actualizar está haciendo exactamente eso, está actualizando el campo en cuestión con lo que sea que esté tratando de actualizar. lo que quieres hacer es agregarle.
por lo tanto, su campo 'otros' debe ser una matriz y para agregar nuevos valores sin anular los datos anteriores, debe usar un arrayUnion.
const handleSubmit = (e) => { e.preventDefault(); try { const user = firestore.collection("users").doc(id); const ref = user.update( { 1: { choices, others: firebase.firestore.FieldValue.arrayUnion(others), } }, { merge: true } ); console.log(" saved"); } catch (error) { console.log(error); } }; ahora no sé cómo funcionan las importaciones en reaccionar, pero en VUEjs necesitarías importar import firebase from "firebase/compat/app"; en la etiqueta del script para usar esa característica de base de fuego.
si desea eliminar un elemento de esa matriz de otros, utilícelo.
const handleSubmit = (e) => { e.preventDefault(); try { const user = firestore.collection("users").doc(id); const ref = user.update( { 1: { choices, others: firebase.firestore.FieldValue.arrayRemove(item), //item = whatever it is you're trying to remove. } }, { merge: true } ); console.log(" saved"); } catch (error) { console.log(error); } };Desde los documentos de React , this.props y this.state pueden actualizarse de forma asincrónica, no debe confiar en sus valores para calcular el siguiente estado. Para arreglarlo, usa una segunda forma de setState() que acepta una función en lugar de un objeto. Esa función recibirá el estado anterior como primer argumento y las propiedades en el momento en que se aplica la actualización como segundo argumento.
prevState es un nombre para el argumento pasado a la función de devolución de llamada setState. Lo que contiene es el valor del estado antes de que React activara setState. Por lo tanto, si varias llamadas a setState están actualizando el mismo estado, el procesamiento por lotes de llamadas a setState puede provocar que se establezca un estado incorrecto . Considere un ejemplo .
Su campo 'otros' debe ser una matriz y para agregar nuevos valores sin anular los datos anteriores, debe usar prevState. Si no quieres usar setState, puedes usar
prevState en useState React Hook con operador de propagación de Javascript para concatenar los valores anteriores con los valores actuales en la matriz
Algo como esto