我正在努力使用 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 解決這個問題，但我認為這不是必需的，但請告訴我。我想我已經接近了...
uj5u.com熱心網友回復：
在您的內部，您useEffect正在呼叫setMessages結果中的每個子節點。setMessages如果在處理完所有子節點后只呼叫一次，事情會快得多：
useEffect(() => {
onValue(dbMessage, (snapshot) => {
let data = [];
snapshot.forEach((childSnapshot) => {
const messageData = childSnapshot.val();
data.push(messageData);
});
console.log(data);
setMessages(data);
});
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/410592.html
標籤：