Mi función useEffect() está recuperando datos de firebase y solo representa un <TaskItem/> en la pantalla.
Extraigo los datos y los almaceno en temptasks en mi estado, luego se representan usando el mapa para mostrar un componente para cada elemento.
Hay cinco elementos en mi firebase backend y, al usar el registro de la consola, puedo ver que se recibieron todos, pero ¿por qué solo se muestra el primero? Volver a renderizar la página muestra los 5.
useEffect(() => { if(userId!=='' && id !== userId) setId(userId); if (id !== '') { let counter = 0; db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{ const tempTasks = []; snapshot.forEach( doc => { var newData = doc.data(); newData.id = doc.id; tempTasks.push(newData); setTasks(tempTasks); } ) setTasks(tempTasks); }); } },[id, userId]); <View style={styles.tasks}> {temptasks.map((task) => { return ( <View style={{ margin: 4}}> <TaskItem/> </View> ); })} </View>No hay representación porque actualiza el estado con la misma matriz (tiene la misma referencia). Tienes que devolver una copia enriquecida.
useEffect(() => { if(userId!=='' && id !== userId) setId(userId); if (id !== '') { let counter = 0; db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{ const tempTasks = []; snapshot.forEach( doc => { var newData = doc.data(); newData.id = doc.id; tempTasks.push(newData); setTasks(tempTasks); // Not this setTasks([...tempTasks, newData]); // But this } ) setTasks(tempTasks); // no effect }); } },[id, userId]);Si bien la respuesta de Pierre funciona perfectamente bien, puede hacer lo mismo con mucho menos código usando la matriz docs y un operador de propagación ( ... ):
db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{ const tempTasks = snapshot.docs.map(doc => { return { ...doc.data(), id: doc.id }; }) setTasks(tempTasks); });O incluso más corto (aunque podríamos perder algo de legibilidad en este paso):
db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{ setTasks(snapshot.docs.map(doc => { return { ...doc.data(), id: doc.id }; })); });