Firestore NextJS

Question

我对 firestore 和 Next.JS 有疑问。我想要一个带有 y firetsore 文档的 ul 和 li 标签的列表。

我已经安装了 firestore，并且我的文档被 consol 日志读取，如图所示。

但正如您在同一张图片中看到的那样，我的网页中没有任何内容。

这是我页面的代码：

import React from 'react';
import {firebase, db} from '../../src/firebase/index';

class Discoverd extends React.Component {
    constructor(props) {
        super(props);
        this. ref = db.collection("Content");
        this.unsubscribe = null;
        this.state = {
            contents : []
        }
    };

    componentDidMount() {
        this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
    }

    onCollectionUpdate = (querySnapshot) => {
        const contents = [];
        querySnapshot.forEach((doc) => {
        const {Category, Name, Description} = doc.data();
        contents.push({
            key: doc.id,
            doc,
            Category,
            Name,
            Description
        });
        })
        console.log(contents);

        this.setState = ({
            contents
        });
    }

    render() {
        return (
            <div>
               <ul>
                {this.state.contents.map(content => 
                    <li key={content.key}>
                        <h3>{content.Name}</h3>
                    </li>

                )}
                </ul>
            </div>
        )
    }
}

export default Discoverd;

我不知道问题出在哪里以及如何解决，请帮助我。

非常感谢。

Answer 1

您正在错误地更改状态。

尝试使用 this.setState({ contents })，而不是 this.setState = ...