Quiero que useEffect obtenga y represente los datos de las rooms . Y vuelva a representar los datos cuando la nueva sala se agregue a las rooms
Código para obtener y mostrar datos con useEffect y una dependencia vacía.
const [rooms, setRooms] = useState([]); const getRoomsData = async () => { const querySnapshot = await getDocs(collection(db, "rooms")); const data = querySnapshot.docs.map((doc) => ({ id: doc.id, data: doc.data(), })); setRooms(data); }; useEffect(() => { getRoomsData(); console.log("rerendered"); }, []); Con este código, después de agregar una nueva habitación a rooms . Necesito actualizar manualmente la página para ver los nuevos datos representados. ¿Qué debo hacer para que se vuelva a representar después de agregar una nueva "sala" a las rooms ?
Código para añadir habitación:
const roomName = prompt("please enter name for chat room"); if (roomName) { addDoc(collection(db, "rooms"), { name: roomName, }); } };Intenté agregar habitaciones a la dependencia useEffect, que tiene el resultado que quiero (no es necesario actualizar), pero es solo porque se está procesando infinitamente, lo cual es malo. ¿Cuál es la forma correcta de hacerlo?
Obtiene infinitas representaciones porque la función dentro de useEffect está actualizando el estado de las rooms que se encuentran en la matriz de dependencia del efecto. Esto siempre causará infinitas re-renderizaciones.
Para responder a su pregunta textualmente: "¿Cómo hago para que se vuelva a procesar solo cuando se cambian los datos?"
Dado que las rooms y data están configurados para ser iguales, puede mantener su useEffect como está, pero luego cree otro useEffect para que se active solo cuando el componente se monte para llamar a getRoomsData() .
const [rooms, setRooms] = useState([]); const getRoomsData = async () => { const querySnapshot = await getDocs(collection(db, "rooms")); const data = querySnapshot.docs.map((doc) => ({ id: doc.id, data: doc.data(), })); setRooms(data); }; useEffect(() = > { getRoomsData(); }, []) useEffect(() => { console.log("rerendered"); }, [rooms]); Creo que el verdadero quid de la solución de su problema es saber cuándo llamar a getRoomsData() , porque dependiendo de eso, cambiará la matriz de dependencia useEffect para satisfacer esa necesidad.
Puedo pensar en dos enfoques para resolver este problema, sin tener que usar useEffect , el primero es una solución en la que actualiza el estado de las rooms localmente sin tener que buscarlo en el servidor, es decir, básicamente está construyendo y agregando un objeto a la matriz de rooms existente, esto es posible solo si conoce la estructura del objeto, mirando su función getRoomsData , parece que está devolviendo una matriz de datos con cada elemento que tiene la siguiente estructura de objeto.
{ id: <DOCUMENT_ID>, data: { name: <ROOM_NAME> } }Entonces, cuando agrega una habitación, puede hacer algo como esto:
const roomName = prompt("please enter name for chat room"); if (roomName) { addDoc(collection(db, "rooms"), { name: roomName, }); let newRoom = { id: Math.random(), //random id data: { name: roomName } } setRooms([...rooms,newRoom]) }; De esta manera, también puede reducir la cantidad de llamadas de red, lo que es una ventaja de rendimiento, pero el único inconveniente es que debe estar seguro de la estructura del objeto para que los resultados se pinten en consecuencia.
En caso de que no esté seguro de la estructura del objeto, lo que podría hacer es invocar getRoomsData después de agregar su nueva habitación a la colección, así:
const roomName = prompt("please enter name for chat room"); if (roomName) { addDoc(collection(db, "rooms"), { name: roomName, }).then(res=>{ getRoomsData(); }) }; Esto garantizaría obtener los datos más recientes (incluida la sala agregada recientemente) y renderizar su componente con todos los resultados. En cualquiera de los métodos que sigue, puede usar su useEffect solo una vez cuando el componente se monta con una matriz de dependencia vacía.
useEffect(() => { getRoomsData(); //console.log("rerendered"); }, []); Al hacer esto, básicamente muestra los datos cuando el usuario visita esta página por primera vez/cuando los componentes se montan por primera vez. En adiciones posteriores, puede agregar la room recién agregada como un objeto a la matriz de rooms después de agregarla a la base de datos o agregarla a la base de datos y obtener todos los resultados nuevamente, de modo que la última adición se represente en la pantalla.