So löschen Sie eine Async-Funktion beim ComponentWillUnmount in einer Reactjs-Komponente?

Question

Hier ist die Komponente:

class ChartComp extends Component{ 
    constructor(props){ 
     super(props); 
     this.timer = null; 
     this.loadData = this.loadData.bind(this); 
    } 

    componentWillMount(){ 
     this.loadData(); 
    } 

    componentWillUnmount(){ 
     if(this.timer){ 
      clearTimeout(this.timer); 
     } 
    } 

    loadData(){ 
     //... 
     getJSON(url, msg=>{ //get data from server 
      if(msg.success){ 
       //... 
       this.timer = setTimeout(()=>{this.loadData()}, 30000); //get data and rerender the component every 30s 
      } 
     }) 
    } 

    render(){ 
     //... 
    } 
} 

Die Funktion clear vor aufgerufen wird die Komponente abgehängt. Aber der Timer ist in einer asynchronen Funktion, und es beginnt erneut, nachdem ich eine Antwort vom Server erhalten habe. Wie kann ich clearTimeout arbeiten?

Answer 1

Setzen Sie eine Flagge in Ihrer Klasse innerhalb.

Überprüfen Sie in Ihrem asynchronen Callback, ob dieses Flag gesetzt wurde, und falls ja, stoppen Sie sofort.

Answer 2

Sie können natürlich eine Flagge setzen, wie von @SLaks vorgeschlagen. Dies ähnelt dem isMounted-Muster. ** Anmerkung ich componentdidmount geändert, was ein besseres Muster ** Ich denke, ist

class ChartComp extends Component{ 
    constructor(props){ 
     super(props); 
     this.timer = null; 
     this.loadData = this.loadData.bind(this); 
    } 

    componentDidMount() { 
     this._mounted = true; 
     this.loadData(); 
    } 

    componentWillUnmount(){ 
     this._mounted = false; 
     if(this.timer){ 
      clearTimeout(this.timer); 
     } 
    } 

    loadData(){ 
     //... 
     getJSON(url, msg=>{ //get data from server 
      if(msg.success && this._mounted){ 
       //... 
       this.timer = setTimeout(()=>{this.loadData()}, 30000); //get data and rerender the component every 30s 
      } 
     }) 
    } 

    render(){ 
     //... 
    } 
} 

Sie können lesen Sie mehr darüber, warum wurde das Muster here jedoch veraltet, dass naiverweise sowohl auf dem getJSON landet erfordern Fahnen tun als sowie die nachfolgende Zeitüberschreitung, weil Sie im Grunde kündbare Versprechungen verketten müssen (wo Sie jeden Schritt auf dem Weg stoppen möchten)

Ein anderes Paradigma wäre, eine beobachtbare Kette dafür zu verwenden. Siehe hierzu blog für Details