Получение данных из Firestore в React ⇐ Javascript
-
Гость
Получение данных из Firestore в React
Я создаю приложение чата в React, используя Firebase. В основном я фокусируюсь на групповых чатах. Я не могу получить сообщения из Firestore. Я могу публиковать сообщения в БД, но не получать их. Вот код компонента Chat.js.
onst Chat = ({ groupId }) => { const [сообщения, setMessages] = useState([]); константная прокрутка = useRef(); const [selectedGroupId, setSelectedGroupId] = useState (null); constchatGroupsData = [ { id: 'Group1', name: 'Group1' }, { id: 'Group2', name: 'Group2' }, ]; const handleGroupSelection = (selectedGroupId) => { setSelectedGroupId (selectedGroupId); }; useEffect(() => { если (идентификатор группы) { console.log("Получение сообщений для groupId:", groupId); const messagesCollectionRef = коллекция (дб, 'ChatGroups', groupId, 'Сообщения'); const q = query(messagesCollectionRef, orderBy('timestamp')); const отписаться = onSnapshot(q, (querySnapshot) => { пусть сообщения = []; querySnapshot.forEach((doc) => { messages.push({ ...doc.data(), id: doc.id, groupId }); }); setMessages (сообщения); }, (ошибка) => { console.error('Ошибка получения сообщений:', error); }); return () => отписаться(); } }, [идентификатор группы]); console.log("Сообщения:", messages); возвращаться ( {/* Список чатов (слева) */} {/* Содержимое списка чата */} {/* Интерфейс чата (правая сторона) */} Психическое здоровье {/* Измените заголовок */} {/* Сообщения чата */} {примеры сообщений && примеры сообщений .filter((message) => message.groupId === selectedGroupId) // Фильтрация сообщений по идентификатору группы .map((сообщение) => ( ))} {/* Компонент отправки сообщения */} {/* Индикатор прокрутки */} ); }; Все необходимые импорты сделаны. Я проверил, все остальные компоненты работают нормально.
Я попробовал жестко запрограммировать примеры сообщений в самом компоненте, и они успешно отрисовываются. Также console.log("Messages:", messages); возвращает пустой массив.
Я создаю приложение чата в React, используя Firebase. В основном я фокусируюсь на групповых чатах. Я не могу получить сообщения из Firestore. Я могу публиковать сообщения в БД, но не получать их. Вот код компонента Chat.js.
onst Chat = ({ groupId }) => { const [сообщения, setMessages] = useState([]); константная прокрутка = useRef(); const [selectedGroupId, setSelectedGroupId] = useState (null); constchatGroupsData = [ { id: 'Group1', name: 'Group1' }, { id: 'Group2', name: 'Group2' }, ]; const handleGroupSelection = (selectedGroupId) => { setSelectedGroupId (selectedGroupId); }; useEffect(() => { если (идентификатор группы) { console.log("Получение сообщений для groupId:", groupId); const messagesCollectionRef = коллекция (дб, 'ChatGroups', groupId, 'Сообщения'); const q = query(messagesCollectionRef, orderBy('timestamp')); const отписаться = onSnapshot(q, (querySnapshot) => { пусть сообщения = []; querySnapshot.forEach((doc) => { messages.push({ ...doc.data(), id: doc.id, groupId }); }); setMessages (сообщения); }, (ошибка) => { console.error('Ошибка получения сообщений:', error); }); return () => отписаться(); } }, [идентификатор группы]); console.log("Сообщения:", messages); возвращаться ( {/* Список чатов (слева) */} {/* Содержимое списка чата */} {/* Интерфейс чата (правая сторона) */} Психическое здоровье {/* Измените заголовок */} {/* Сообщения чата */} {примеры сообщений && примеры сообщений .filter((message) => message.groupId === selectedGroupId) // Фильтрация сообщений по идентификатору группы .map((сообщение) => ( ))} {/* Компонент отправки сообщения */} {/* Индикатор прокрутки */} ); }; Все необходимые импорты сделаны. Я проверил, все остальные компоненты работают нормально.
Я попробовал жестко запрограммировать примеры сообщений в самом компоненте, и они успешно отрисовываются. Также console.log("Messages:", messages); возвращает пустой массив.
Мобильная версия