Firestore NextJS

Question

我有一个关于firestore和Next.JS的问题。我想要一个带有文档的ul和li标签的列表。

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

​

但是正如你在同一张图片中看到的，在我的网页上什么也没有出现。

这是我的页面代码：

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 = ...