我怎样将这些数据放入 html 中?
2020-03-10
94
我是一名自学成才的程序员/React 程序员,正在尝试使用 Firebase Firestore。
当我尝试此操作时:
var docRef = db.collection("Marcus").doc("one")
docRef.get().then(function(doc) {
if (doc.exists) {
console.log("Document data:", doc.data());
this.setState({
test: doc.data()
});
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
它运行完美。没有错误,文档在控制台中。
但是当我尝试将其添加到输入时
class LatestNews extends Component {
constructor(props) {
super(props)
this.state = {
test: "input"
}
}
componentDidMount() {
docRef.get().then(function(doc) {
if (doc.exists) {
this.setState({
test: doc.data()
});
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
}
componentDidUpdate() {
docRef.get().then(function(doc) {
if (doc.exists) {
this.setState({
test: doc.data()
}); } else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
}
render() {
return (
<div> <br/><br/>
<h1 className={Style.blue}>sup</h1>
<h1>{this.state.test}<News/> </h1>
它不起作用。如果我将其作为列表执行,则会出现集合中文档数量的项目符号,但不会显示任何文档。
我认为问题出在“state.test”部分或与 Firestore 格式无法轻松转换为 HTML 有关的东西。
控制台结果:
传递到控制台时: 文档数据: {Lnews:“这有效吗?”} Lnews:“这有效吗?” proto :对象
尝试使用 get 中的内容设置状态时:
获取文档时出错:TypeError:无法读取未定义的属性“setState” at LatestNews.jsx:68
2个回答
请使用 this.setState() 来更新状态值
this.setState({
test: doc.data()
});
Abey
2020-03-10
您的代码片段存在问题,您正在直接改变状态。如果您直接改变状态,则不会调用 render 。
修复很简单,只需将行更改为:
this.state.test = doc.data();
至
this.setState({
test: doc.data()
});
Sayooj V R
2020-03-10