Javascript 警告：设置状态（…）：只能更新已安装或正在安装的组件，如何卸载？

我知道这个问题的标题已经被问了很多次，但我的问题是不同的。我不知道如何使用

组件卸载
来解决这个问题

我正在使用
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>
};

有人能帮我解决这个问题吗？
根据@Brahma Dev的评论，我就是这样解决的

我在组件的状态中添加了对
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
中有更好的处理方法，请告诉我。谢谢
文档中明确说明了如何取消订阅@布拉马德夫，谢谢。基于您的帮助，我解决了这个问题（不确定是否优雅），我建议不要将函数置于状态，因为它会使react的内部扩散无效。而是在componentWillMount中执行此操作。unsubscribe=fdb。。。在componentWillUnmount中执行此操作。unsubscribe&&this.unsubscribe（）
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();
}