[英]Warning: setState(…): Can only update a mounted or mounting component, How to unmount?
I know that this question title has been asked multiple times, but my question is different. 我知道这个问题的标题已经被问过多次了,但是我的问题有所不同。 I am not sure how to solve that using
componentWillUnmount
. 我不确定如何使用
componentWillUnmount
解决。
I am using firebase
's new FireStore
to add data. 我正在使用
firebase
的新FireStore
添加数据。 I also watch for changes as 我也注意变化
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));
}
So that means, every time a new change is loaded, the entire component is refreshed, which means the current one is going to trash, is that a correct understanding? 因此,这意味着每次加载新更改时,整个组件都会刷新,这意味着当前组件将被废弃,这是否是正确的理解?
If yes, that means, I should stop listening to this snapshot since this one is going to go away. 如果是,那意味着,我将停止收听此快照,因为该快照将消失。 Is that understanding correct?
这种理解正确吗?
If yes, I am not sure how to stop listening to this ongoing watch. 如果是,我不确定如何停止收听此正在进行中的手表。
My entire code looks like 我的整个代码看起来像
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>
};
And what I see on Developer Console is 我在开发人员控制台上看到的是
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.
Can someone please help me with this? 有人可以帮我吗?
Based on the comment from @Brahma Dev, this is how I resolved it. 根据@Brahma Dev的评论,这就是我解决的方法。
I added a reference to onSnapshot
in Component's state and called it when componentWillUnmount
is called. 我在组件状态下添加了对
onSnapshot
的引用, 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();
}
If there is a better way to handle this in ReactJS
, please let me know. 如果在
ReactJS
有更好的方法来处理此ReactJS
,请告诉我。 Thanks 谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.