Mi método useEffect es:
useEffect(() => { async function getRoomDetails(){ const db = getFirestore(); const querySnapshot = await getDocs(collection(db, "rooms")); querySnapshot.forEach((doc)=>{ console.log('Document'); console.log(doc.id); console.log(doc.data().name); var channelNameData = doc.data().name; }) } async function getRoomMessages() { const db = getFirestore(); const roomMessages = roomId && query( collection(db, "rooms", roomId, "messages"), orderBy("timestamp", "asc") ); const querySnapShot = await getDocs(roomMessages); querySnapShot.forEach((doc) => { console.log(doc.id, "=>", doc.data()); }); } getRoomDetails(); getRoomMessages(); }, []); y quiero pasar channelNameData a ChatInput, como
<ChatInput channelName={channelNameData} channelId={roomId} />¿Cómo hago esto? También quiero evitar que las asignaciones a la variable 'channelNameData' desde el interior de React Hook useEffect se pierdan después de cada error de procesamiento.
Cree una variable de estado con useState .
Modifique esa variable dentro de su gancho useEffect .
La variable estará entonces dentro del alcance del resto de su componente y puede pasarla como accesorio.
Asegúrese de manejar el estado predeterminado antes de que se ejecute el gancho de efecto (por ejemplo, con un valor predeterminado sensato o un valor que indique que se debe representar un componente <Loading /> en lugar de <ChatInput /> )
Puede utilizar el enlace useState para crear una variable para almacenar channelNameData.
import { useState } from 'react'; const [channelNameDataState, setChannelNameDataState] = useState(null)Dentro de su useEffect, puede tener una línea que establezca channelNameDataState.
setChannelNameDataState(channelNameData)Entonces pasaría en este estado al componente secundario
<ChatInput channelName={channelNameDataState} channelId={roomId} />En cuanto a evitar que se pierdan las asignaciones a la variable channelNameData, debería poder combinar el enlace useState con localState para asegurarse de que puede conservar el estado.
Crear variable de estado y asignar valor dentro del efecto,
const [channelNameData, setChannelNameData] = useState([]); useEffect(() => { async function getRoomDetails(){ const db = getFirestore(); const querySnapshot = await getDocs(collection(db, "rooms")); querySnapshot.forEach((doc)=>{ console.log('Document'); console.log(doc.id); console.log(doc.data().name); //var channelNameData = doc.data().name; setChannelNameData(doc.data().name) }) } async function getRoomMessages() { const db = getFirestore(); const roomMessages = roomId && query( collection(db, "rooms", roomId, "messages"), orderBy("timestamp", "asc") ); const querySnapShot = await getDocs(roomMessages); querySnapShot.forEach((doc) => { console.log(doc.id, "=>", doc.data()); }); } getRoomDetails(); getRoomMessages(); }, []);en jsx,
<ChatInput channelName={channelNameDataState} channelId={roomId} />