开发者问题收集

我怎样将这些数据放入 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