Question

我有一个非常简单的React组件，在componentDidMount（）方法中，我调用Firebases firestore来获取文档。第一个渲染调用显示一个模板，标题为“没有项目”。 Firebase调用完成后，将使用项数据成功呈现组件。

但是在此过程中它会向控制台抛出错误

index.js：2178警告：只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState，replaceState或forceUpdate。这是一个无操作。

请检查HomePage组件的代码。

我试过看其他文章，但到目前为止，我可以看到我正在以正确的方式做到这一点。谁能告诉我我做错了什么？

import React from 'react';
import { firestore } from '../firebase/firebase'

class HomePage extends React.Component {

    constructor(props) {

        super(props);   

        this.state = {
            items: ''
        }
    }

    componentDidMount() {

        firestore.collection('item').doc('P1zi3sqkgFuJ6Jw243SA').get().then( o => { 
            this.setState({items: o.data()});
        });         

    }

    render() {

        const item = this.state.items

        const template = item ? <h1>{item.title}</h1> : <h1>No item</h1>

        return(

            <div>
                <h1>Home Page</h1>
                { template}
            </div>
        );
    }
}

export default HomePage;

Answer 1

我设法弄清楚为什么会出现这个错误，即使react正在从Firebase渲染返回的项目就好了。

当在组件上刷新页面时，它会抛出错误，如果我导航到另一个组件，那么它将不会出现。我还注意到，当重新编译软件包并刷新主组件时，它会向Firebase发出两个请求。

不确定底层问题是什么，但至少它是朝着正确方向迈出的一步

加载firebase文档时出现反应错误

1 个答案: