从 firebase 收集的 React 地图

Question

我正在努力使用 Google Firebase 实时数据库，但我无法创建集合数组。

当我在控制台日志中循环 const 返回时，我将所有消息作为单独的对象获取，但我只想将消息放在一个大数组中，以便我可以在这里循环。我希望有人可以帮助我。

到目前为止，这是我的代码：

// 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;

我已尝试使用 useEffect 解决此问题，但我认为这不是必需的，但请告诉我。我想我已经接近了......

Answer 1

在您的useEffect 中，您正在为结果中的每个子节点调用setMessages。如果在处理完所有子节点后只调用一次setMessages，事情会快得多：

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