Por favor considere el siguiente código:
Padre:
const Messages = (props) => { const [targetUserId, setTargetUserId] = useState(null); const [currentChat, setCurrentChat] = useState(null); useEffect(() => { const { userId } = props; const initiateChat = async (targetUser) => { const chatroom = `${ userId < targetUser ? `${userId}_${targetUser}` : `${targetUser}_${userId}` }`; const chatsRef = doc(database, 'chats', chatroom); const docSnap = await getDoc(chatsRef); if (docSnap.exists()) { setCurrentChat(chatroom); } else { await setDoc(chatsRef, { empty: true }); } }; if (props.location.targetUser) { initiateChat(props.location.targetUser.userId); setTargetUserId(props.location.targetUser.userId); } }, [props]); return ( ... <Chat currentChat={currentChat} /> ... ); };Niño:
const Chat = (props) => { const {currentChat} = props; useEffect(() => { const unsubscribeFromChat = () => { try { onSnapshot( collection(database, 'chats', currentChat, 'messages'), (snapshot) => { // ... // } ); } catch (error) { console.log(error); } }; return () => { unsubscribeFromChat(); }; }, []); ... El problema con el que estoy lidiando es que la función de limpieza UseEffect de Child, que depende de la propiedad de la sala de chatroom pasada por su padre, arroja un error TypeError porque aparentemente la sala de chatroom es nula. Es decir, se vuelve nulo cuando el componente principal se desmonta, el componente funciona bien mientras está montado y los accesorios se reconocen correctamente.
He intentado diferentes enfoques para solucionar esto. La única forma en que podría hacer que esto funcione si moví useEffect del componente secundario al componente principal y definí currentChat usando useRef() que honestamente no es ideal.
¿Por qué está pasando esto? ¿La función de limpieza useEffect no debería depender del estado anterior? ¿Hay una manera adecuada de arreglar esto?
currentChat es una dependencia de ese efecto. Si es nulo, la cancelación de la unsubscribe debería regresar antes de tiempo.
const {currentChat} = props; useEffect(() => { const unsubscribeFromChat = () => { if(!currentChat) return; try { onSnapshot( collection(database, 'chats', currentChat, 'messages'), (snapshot) => { // ... // } ); } catch (error) { console.log(error); } }; return () => { unsubscribeFromChat(); }; }, [currentChat]);Pero eso no parece la mejor solución. Creo que debería manejar todas las suscripciones/bajas de suscripción en el mismo componente. No debe suscribirse en el padre y luego darse de baja en el hijo.
EDITAR:
Ah, hay un montón de cosas pasando aquí que no son buenas. Tiene su ID de usuario proveniente de props - props.location.targetUser.userId y luego lo configura como estado. NO es estado, es solo un accesorio. El estado es algo que posee un componente, algunos datos que ha creado un componente, algunos datos que emanan de ese componente, ese componente es su fuente de verdad (se entiende la idea). Si su componente no lo creó (como el ID de usuario que ingresa en accesorios a través del objeto location.targetUser ), entonces no es el estado. Tratar de mantener el accesorio sincronizado con el estado y preocuparse por todos los casos extremos es un ejercicio infructuoso. Simplemente no es estado.
Además, es un olor codificado tener [props] como dependencia de un efecto. Debe dividir las piezas de accesorios que ese efecto realmente necesita para detectar cambios y colocarlos en la matriz de dependencia individualmente.