React map over collection from firebase-CodePudding

I am struggling with Google Firebase Realtime database but I can't create an array of the collection.

When I loop the const return in console log I get all the messages as separate objects but I just want the messages to come in a large array so I can loop here. I hope someone can help me on my way.

Here is my code so far:

// Libraries
import * as React from 'react';
import { useState, useEffect } from 'react';
import { getDatabase, ref, onValue } from 'firebase/database';

// Components
import Container from '~/common/Container';

import '~/utils/firebase';

export interface MessageProps {
  messageId?: string;
  content?: string;
  likes?: number;
  timestamp?: number;
  user?: string;
}

/**
 * Homepage
 *
 * @returns {JSX.Element}
 */
const Home: React.FC = (): JSX.Element => {
  const [messages, setMessages] = useState<MessageProps[]>([{}]);
  const db = getDatabase();
  const dbMessage = ref(db, 'messages/');

  useEffect(() => {
    onValue(dbMessage, (snapshot) => {
      snapshot.forEach((childSnapshot) => {
        const messageData = childSnapshot.val();
        setMessages([
          ...messages,
          {
            content: messageData.content,
            likes: messageData.likes,
            timestamp: messageData.likes,
            user: messageData.user,
          },
        ]);
      });
    }, {
      onlyOnce: true,
    });
  }, []);

  console.log(messages);

  return (
    <Container>
      <p>Map (loop) comes here...</p>
    </Container>
  );
};

// Connect and export
export default Home;

I have tried to fix this with useEffect, but I think this is not needed but let me know. I'm thinking I'm getting close...

CodePudding user response：

Inside your useEffect you're calling setMessages for each child node in the results. Things will be much faster, if you only call setMessages once after processing all child nodes:

useEffect(() => {
  onValue(dbMessage, (snapshot) => {
    let data = [];
    snapshot.forEach((childSnapshot) => {
      const messageData = childSnapshot.val();
      data.push(messageData);
    });
    console.log(data);
    setMessages(data);
  });
}, []);