2017-10-13 47 views
0

我无法取消订阅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。

备忘录,只是我的快速补丁库做记忆,以便一个实例方法,总是会返回相同的对象。

回答

0

好的,这是我的错,但我认为说文档有误导性也是合理的,因为分离是因为你传递了一个空函数还是因为你“呼叫”了快照实例。

基本上,问题是取消订阅应该是该快照的同一个实例。

我记忆我的.listenRealTimeUpdate(),解决了我的问题,虽然在上面的例子中,并不是真正解决它的最好方法。

但在我真正的问题中,“分离”发生在.componentWillUnmount期间,所以它有点解决它自己。