Tengo un componente de reacción funcional Tasks_1, e inicialmente, quiero recuperar el ID de usuario de la tienda redux que funciona correctamente.
Después de esto, quiero usar el ID de usuario en useEffect que recuperé de la tienda redux para obtener datos del backend.
Cuando se ejecuta useEffect, dice que se ha recuperado una cadena vacía del ID de estado. ¿Cómo puedo hacer que useEffect se ejecute después de que el estado "id" se establezca desde useState recuperándolo de la tienda?
function Tasks_1 () { const [id, setId] = useState(''); const userId = useSelector((state) => state.id); const [tasks, setTasks] = useState([]); useEffect(() => { setId(userId); if (id !== '') { db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{ const tempTasks = []; snapshot.forEach( doc => { tempTasks.push(doc.data()); } ) setTasks(tempTasks); }); } }),[id]; return ( ... ) }Puede obtener un ciclo infinito si logra que esto funcione de la manera que lo tiene. La actualización de la id usando setId provocará una nueva representación y se volverá a llamar a useEffect ya que cambió la id , etc.
Creo que esto funcionaría:
const [id, setId] = useState(''); const userId = useSelector((state) => state.id); const [tasks, setTasks] = useState([]); useEffect(() => { // this will make sure you only set id when userId // is a valid value, and it won't reset it every // serenader if(userId!=='' && id !== userId) setId(userId); if (id !== '') { db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{ const tempTasks = []; snapshot.forEach( doc => { tempTasks.push(doc.data()); } ) setTasks(tempTasks); }); } }, [id, userId]); y tendría que agregar el userId de usuario a las dependencias de la matriz.