编辑: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;
答案 0 :(得分:0)
您可以使用JSX显示数据:
<p id="value">{JSON.stringify(messageList)}</p>
messageList
是Firebase响应的结果:
ref.on("value", function(snapshot) {
setMessageList(snapshot)
}, function (error) {
console.log("Error: " + error.code);
});