警告:setState(...):只能更新已安装或安装的组件,如何卸载?

时间:2017-10-14 16:26:57

标签: javascript reactjs firebase google-cloud-firestore

我知道这个问题标题已被多次询问,但我的问题不同。我不确定如何使用componentWillUnmount来解决这个问题。

我正在使用firebase的新FireStore来添加数据。我也关注变化

componentDidMount() {
        fdb.collection(collectionName)
            .onSnapshot({includeDocumentMetadataChanges: true}, function (querySnapshot) {
            let items = [];
            querySnapshot.forEach(function (doc) {
                let source = doc.metadata.hasPendingWrites ? "[OF]" : "[ON]";
                items.push(source + " -> " + doc.data().title);
                console.log(source, " data: ", doc && doc.data());
            });
            this.setState({"items": items});
        }.bind(this));
    }  

这意味着,每次加载新的更改时,整个组件都会刷新,这意味着当前的组件将被丢弃,这是正确的理解吗?

如果是,那意味着,我应该停止收听这个快照,因为这个快照将会消失。这种理解是否正确?

如果是,我不知道如何停止听这个正在进行的手表 我的整个代码看起来像

import React from "react";
import {fdb} from "../mainPage/constants";

const collectionName = "todos";
export default class ToDos extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [],
            textBox: "",
            loading: true
        }
    }

    componentDidMount() {
        fdb.collection(collectionName)
            .onSnapshot({includeDocumentMetadataChanges: true}, function (querySnapshot) {
            let items = [];
            querySnapshot.forEach(function (doc) {
                let source = doc.metadata.hasPendingWrites ? "[OF]" : "[ON]";
                items.push(source + " -> " + doc.data().title);
                console.log(source, " data: ", doc && doc.data());
            });
            this.setState({"items": items});
        }.bind(this));
    }


    handleTextBoxChange = (event) => {
        this.setState({textBox: event.target.value});
    };

    handleAddItem = () => {
        fdb.collection(collectionName).add({
            "title": this.state.textBox
        }).then(function (docRef) {
            console.log("added " + docRef.id , docRef.get());
        }.bind(this));
    };

    handleRemoveItem = (index) => {
        let remainingItems = this.state.items;
        remainingItems.splice(index, 1);
        this.setState({items: remainingItems});
    };

    render() {
        return (
            <div>
                <div>
                    <input type="text" value={this.state.textBox} onChange={this.handleTextBoxChange}/>
                    <input type="submit" value="Add Item" onClick={this.handleAddItem}/>
                </div>
                <div>{this.state.items.map((item, index) => <Item key={index}
                                                                  index={index}
                                                                  item={item}
                                                                  onDeleteClick={this.handleRemoveItem}/>)}</div>

            </div>
        )
    }
}

const Item = ({index, item, onDeleteClick}) => {
    return <div>
        <input type="button" value="delete" onClick={() => onDeleteClick(index)}/>
        <span>{item}</span>

    </div>
};

我在Developer Console上看到的是

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the ToDos component.  

有人可以帮帮我吗?

1 个答案:

答案 0 :(得分:0)

基于@Brahma Dev的评论,我就是这样解决的。

我在Component的状态中添加了对onSnapshot的引用,并在调用componentWillUnmount时调用它。

componentWillMount() {
    let unsubscribe = fdb.collection(collectionName)
        .onSnapshot({includeDocumentMetadataChanges: true}, function (querySnapshot) {
        let items = [];
        querySnapshot.forEach(function (doc) {
            let source = doc.metadata.hasPendingWrites ? "[OF]" : "[ON]";
            items.push(source + " -> " + doc.data().title);
            console.log(source, " data: ", doc && doc.data());
        });
        this.setState({"items": items});
    }.bind(this));
    this.setState({"unsubscribe": unsubscribe});
}

componentWillUnmount() {
    this.state.unsubscribe();
}

如果有更好的方法可以在ReactJS处理此问题,请告知我们。感谢