简单的盖茨比网站中的基本消防商店获取请求问题

Question

我创建了一个简单的get请求，但我不确定该怎么办，因为它要求一个密钥。这是我的代码的简化版本：

import React, { Component, useEffect } from 'react';
import firebase from "gatsby-plugin-firebase";
var db = firebase.firestore();
var word1 = db.collection("menue").doc("word1");
class newMenue extends Component {

constructor(props) {
super(props)    
this.state = {
wordOne: "",            
}
}
render() {
word1.get()
.then(doc => {
if (!doc.exists) {
console.log('No such document!');
} else {
console.log('Document data:', doc.data());
this.setState({
wordOne: doc.data()
}) 
}
})
.catch(err => {
console.log('Error getting document', err);
});

return (
<div>
<h2 >{this.state.wordOne}</h2>
<br/> 
<br/>
<h5>4 Slices of grilled Cypriot Halloumi</h5>
</div>
)
}
}
export default newMenue

这是我的数据库：

Document data: {One: "hi"}

这就是开发工具所说的。

错误：对象作为React子对象无效(已找到：带键的对象｛一个｝(。如果要渲染子对象的集合，请使用数组相反

如何添加密钥以显示信息？

具体来说，我正试图为我朋友的汉堡店建立一个网站，他可以自己在网站上更改菜单，但我还是被困在了最后一点。

Answer 1

您正在尝试渲染一个对象：

<h2>{this.state.wordOne}</h2> // which is {One: "hi"}

您需要呈现对象的属性：

<h2>{this.state.wordOne.One}</h2>