在 Javascript/HTML 中将 Firebase 数据显示为数组

Question

编辑：Object.keys(snapshot.val())[0] 返回“-LfL-eVLT1QtZw-LAvpS”，这是随机分配的 Firebase 名称。但是如何显示它的“文本”属性？

下面的代码运行良好。我可以点击提交数据按钮，它会将数据推送到 Firebase，但我无法显示它。我想在 HTML 列表中显示数据，但 Firebase 返回的是嵌套对象，而不是数组，我不知道如何处理它。

我附上了一个屏幕截图，以便清楚我的代码在做什么。 JSON.stringify 非常有前途 - 它显示了所有数据，所以我知道它确实存在并且与数据库正确通信。但它显然在任何意义上都不可用。我需要知道我能做些什么，以便我可以将 .map() 应用到我的部分代码并使其工作，但经过数小时的尝试后，我还是一无所获。

Object.keys(snapshot) 我以为会将对象转换为数组，但我根本不知道它在做什么。

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