Отображение данных Firebase в виде массива в Javascript / HTML

Question

Редактировать: Object.keys (snapshot.val ()) [0] возвращает «-LfL-eVLT1QtZw-LAvpS», который является случайно назначенным именем Firebase.Но как мне отобразить свойство text для этого?

Код ниже работает довольно хорошо.Я могу нажать кнопку «Отправить данные», и она отправит данные в Firebase, но у меня возникли проблемы с отображением.Я хочу отобразить данные в списке HTML, но Firebase возвращает вложенный объект, а не массив, и я не знаю, что с ним делать.

Я прикрепил скриншот, чтобы было понятно, чтомой код делаетJSON.stringify очень многообещающий - он показывает все данные, поэтому я знаю, что он действительно там и правильно взаимодействует с базой данных.Но это явно не годится для использования в любом смысле.Мне нужно знать, что я могу сделать, чтобы я мог применить .map () к части моего кода и заставить его работать, но я выхожу пустым после нескольких часов попыток.

Object.keys (снимок) Я думал, что преобразовал бы объект в массив, но я не могу сказать, что он делает вообще.

import React, {useState} from 'react'
import fire from './fire'
import './App.css'

const App = () => {
  let [messageList, setMessageList] = useState(fire.database().ref('messages'))

  const handleSubmit = (e) => {
    e.preventDefault()
    //fire.database().ref('messages').push( document.querySelector("#message-input").value );
    fire.database().ref('messages').push({ text: document.querySelector("#message-input").value, id: document.querySelector("#message-input").value })
  }

  var ref = fire.database().ref("messages")
  var fireArray = [fire.database().ref("messages")]

  ref.on("value", function(snapshot) {
    document.querySelector("#value").innerHTML = JSON.stringify(snapshot)
    document.querySelector("#snapshotval").innerHTML = snapshot.val().text
    document.querySelector("#snapshot").innerHTML = snapshot
    document.querySelector("#messages").innerHTML = Object.keys(snapshot)
  }, function (error) {
    console.log("Error: " + error.code);
  });

  return(
    <section>
    <form onSubmit={handleSubmit}>
      <input type="text" id="message-input"></input>
      <button>Submit Data</button>
    </form>
    <h2>JSON.stringify(snapshot)</h2>
    <p id="value"></p>
    <h2>snapshot.val()</h2>
    <p id="snapshotval"></p>
    <h2>snapshot</h2>
    <p id="snapshot"></p>
    <h2>Object.keys(snapshot)</h2>
    <p id="messages"></p>
    </section>
  )
}

export default App;

Answer 1

Вы можете использовать JSX для отображения данных:

<p id="value">{JSON.stringify(messageList)}</p>

messageList будет результатом ответа Firebase:

ref.on("value", function(snapshot) {
    setMessageList(snapshot)
  }, function (error) {
    console.log("Error: " + error.code);
  });

Дополнительная информация: https://reactjs.org/docs/introducing-jsx.html