ReactJS firestore无法取消快照
问题描述:
我无法取消订阅Firestore。ReactJS firestore无法取消快照
这里是我的代码:
import React from 'react';
import { PropTypes } from 'react';
import firebase from '../../common/firebase';
import { Bar } from 'react-chartjs-2';
import moment from 'moment';
import s from './styles.css';
import request from 'superagent';
import Memoizer from '../../common/memoizer';
class BasicChart extends React.Component {
firestore(){
return firebase.firestore()
}
constructor(props){
super(props);
this.memoizer = new Memoizer();
}
dailyTransactions(){
return this.memoizer.memoize(`daily_transactions`,() => {
return this
.firestore()
.collection(`daily_transactions`);
})
}
todayDocument(){
return this.memoizer.memoize(`todayDocument`,() => {
return this
.dailyTransactions()
.doc("2017-10-13");
});
}
listenRealtimeUpdate(){
console.log("listening");
this.todayDocument().onSnapshot(doc => {
console.log(this);
console.log(doc.data());
});
}
detach(){
console.log("unsubscribing");
const unsubscribe = this.todayDocument().onSnapshot(() => {});
console.log(unsubscribe);
unsubscribe();
}
render(){
return (
<div>
<button onClick={this.listenRealtimeUpdate.bind(this)}> LISTEN </button>
<button onClick={this.detach.bind(this)}> DETACH </button>
</div>
)
}
}
,但我仍然得到此警告。
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 MyChart component.
我的猜测是造成问题,因为我包装的大多数事情到一个函数,但是,即使是在我memoized的财产,我还没有从公司的FireStore快照拆卸组件suceeeded。
备忘录,只是我的快速补丁库做记忆,以便一个实例方法,总是会返回相同的对象。
答
好的,这是我的错,但我认为说文档有误导性也是合理的,因为分离是因为你传递了一个空函数还是因为你“呼叫”了快照实例。
基本上,问题是取消订阅应该是该快照的同一个实例。
我记忆我的.listenRealTimeUpdate(),解决了我的问题,虽然在上面的例子中,并不是真正解决它的最好方法。
但在我真正的问题中,“分离”发生在.componentWillUnmount期间,所以它有点解决它自己。