Как мне нормально получить данные из Firebas и вывести данные в html тег

Question

Как мне получить из firebase нормальный ответ. я пытался с помощью такой штуки:

      const db  =  ref(getDatabase(),'Restaurants/');
      let data = []
      onValue(db, (snapshot) => {
        data = snapshot.val();
        return data
      });
      console.log(data)

потом закидываю это в новый массив:

  let list = []
  for( let i =0;i<=data.length;i++){
    if (data[i] === undefined){
      continue
    }
    else{
      console.log(data[i])
      list.push(data[i])
    }

  }

в итоге получаю :

вывести в html тег я пытаюсь следующим образом:

  return(
    <div className="restaraunts">
      {list.map((restaraunt) => (
      <div className="restaraunt-info">
        <span className="restaraunt-name"> {restaraunt.name}</span>
        <span className="restaraunt-desc"> {restaraunt.name}</span>
        <span className="restaraunt-price">{restaraunt.name}</span>
        <span className="restaraunt-time">{restaraunt.name}</span>
        <span className="restaraunt-logo"> {restaraunt.name}</span>
      </div>
      ))}
    </div>
  )

код целиком:

import React from 'react';
import {useState} from 'react'
import { getDatabase, ref, child, get,onValue } from "firebase/database";




function Restaraunts(){

  const db  =  ref(getDatabase(),'Restaurants/');
  let data = []
  onValue(db, (snapshot) => {
    data = snapshot.val();
    return data
  });
  console.log(data)


  let list = []
  for( let i =0;i<=data.length;i++){
    if (data[i] === undefined){
      continue
    }
    else{
      console.log(data[i])
      list.push(data[i])
    }

  }
  console.log(list)
  return(

    <div className="restaraunts">
      {list.map((restaraunt) => (
      <div className="restaraunt-info">
        <span className="restaraunt-name"> {restaraunt.name}</span>
        <span className="restaraunt-desc"> {restaraunt.name}</span>
        <span className="restaraunt-price">{restaraunt.name}</span>
        <span className="restaraunt-time">{restaraunt.name}</span>
        <span className="restaraunt-logo"> {restaraunt.name}</span>
      </div>
      ))}
    </div>
  )
}

export default Restaraunts

Я только только начал с react работать и firebase. Главный вопрос почему я получаю пустой массив? и как мне вывести все полученые данные в HTML.

Answer 1

Запросы к firebase являются асинхронными, их рекомендуется выполнять в хуке useEffect. Конкретно по вашему компоненту см. комментарии ниже.

Также рассмотрите примеры в официальной документации.

import React, { useEffect } from "react";
import { useState } from "react";
import { getDatabase, ref, child, get, onValue } from "firebase/database";

function Restaraunts() {
  const db = ref(getDatabase(), "Restaurants/"); // ссылку лучше вынести в отдельный API, либо сделать кастомный хук. 
  const [data, setData] = useState([]) //состояние, в котором будут храниться данные.

  useEffect(()=>{ // fetch запросы рекомендуется выполнять в хуке useEffeck
      onValue(db, (snapshot) => {
        /*здесь вы можете полученные данные обработать*/
        const currentData = snapshot.val();
        console.log(currentData) // для наглядности
        setData(currentData);
      });
  }, [data])

  return (
    <div className="restaraunts">
      {list.map((restaraunt) => (
        <div className="restaraunt-info">
          <span className="restaraunt-name"> {restaraunt.name}</span>
          <span className="restaraunt-desc"> {restaraunt.name}</span>
          <span className="restaraunt-price">{restaraunt.name}</span>
          <span className="restaraunt-time">{restaraunt.name}</span>
          <span className="restaraunt-logo"> {restaraunt.name}</span>
        </div>
      ))}
    </div>
  );
}

export default Restaraunts;

БЛОГ НА HUSL

Как мне нормально получить данные из Firebas и вывести данные в html тег

Ответы (1 шт):