Estoy tratando de obtener datos de firebase. La matriz authData está vacía cuando la aplicación se procesa por primera vez, pero cuando se procesa varias veces, la matriz authData selecciona algunos datos.

//import firebase realtime database method
import{db} from './firebase-config';


//handling the posts from the database
const [posts, setPosts]= useState([]);

//handling the user information
const [authData, setAuthData] = useState([])

useEffect(() => {
    //fetching posts from the database
    db.collection('posts').onSnapshot(snapshot => {
        setPosts(snapshot.docs.map(doc => ({
            id: doc.id, 
            post: doc.data() 
        })))
    });
                
    //fetching the users information
    db.collection('users').onSnapshot(snapshot=>{
        setAuthData(snapshot.docs.forEach((doc)=>({
            id: doc.id,
            authData: doc.data()
        })))
        console.log(authData)    
    })
},[])
0
magambo isaac 21 ene. 2021 a las 23:13

1 respuesta

La mejor respuesta

Ese es el comportamiento esperado. Si observa cómo define su estado:

const [authData, setAuthData] = useState([])

Ese [] allí es el valor inicial para el estado authData.

Dado que cargar datos de la base de datos lleva un poco de tiempo, la interfaz de usuario se procesará inicialmente con la matriz vacía que especifique. Luego, una vez que se cargan los datos y se llama a setAuthData, se procesará con los datos reales.

Si no desea renderizar el componente hasta que se carguen los datos, puede especificar null como valor predeterminado y luego detectarlo en su código de renderizado.

0
Frank van Puffelen 21 ene. 2021 a las 21:01