Reaksiyon bileşeninin ayrılıp ayrılmadığını kontrol etmenin bir yolu var mı?

Question

Ben benim bileşeni tepki bağlantısını kesmeniz gerekir bir usecase var. Ancak bazı durumlarda, belirli tepki bileşeni, farklı bir işlev tarafından kaldırılır. Dolayısıyla, I bileşeni olarak ayırmadan önce monte edilmiş olup olmadığını kontrol etmek gerekir. isMounted() resmi olarak artık ediliyor yana

Answer 1

, kendi bileşeninde yapabilirsiniz:

componentDidMount() { 
    this._ismounted = true; 
} 

componentWillUnmount() { 
    this._ismounted = false; 
} 

Kendi state değişkeni sürdürmenin Bu desen ReactJS belgelerinde ayrıntılı çıkmaktadır: i bulmuştur https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html

Answer 2

bileşen yüklenmemiş olacak, bu sayfayı doldurunuz

Answer 3

Buraya geldim çünkü polling API'yi durdurmanın bir yolunu arıyordum.

react docswebsocket davayı kapağı yok, ama yoklama biri.

Ben çalıştığını

// React component 
let allowPolling = true 

React.createClass({ 
    poll() { 
     if (!allowPolling) { 
      return 
     } 
     // otherwise, call the api 
    } 
    componentWillMount() { 
     allowPolling = true 
    } 
    componentWillUnmount() { 
     allowPolling = false 
    } 
}) 

çalıştı şekilde. Umarım yardımcı olur

,

Answer 4

Ben Shubham cevap kullanarak durdurmak için kendi kodunu geçiş için ihtiyacı olan insanlar için tepki önerdiği bir çözüm olduğunu düşünüyorum] = siz Bunun için herhangi bir başarısız test durumu biliyorsanız lütfen haber verin isMounted anti-pattern.

Bu kötü olmayabilir, ama bu soruna gerçek çözümler listeleme değer.

The article linked by Shubham bu anti desen önlemek için 2 öneriler sunar. İhtiyacınız olan şey, bileşen takılı değilken neden setState çağıracağınıza bağlıdır. Eğer bileşeninde bir Akı mağaza kullanıyorsanız

, sen

class MyComponent extends React.Component { 
    componentDidMount() { 
    mydatastore.subscribe(this); 
    } 
    render() { 
    ... 
    } 
    componentWillUnmount() { 
    mydatastore.unsubscribe(this); 
    } 
} 

Eğer ES6, sen yapmak için verdiğin sözü kaydırmak gerekebilir vaat kullanırsanız componentWillUnmount içinde abonelikten gerekir o cancelable.

const cancelablePromise = makeCancelable(
    new Promise(r => component.setState({...}})) 
); 

cancelablePromise 
    .promise 
    .then(() => console.log('resolved')) 
    .catch((reason) => console.log('isCanceled', reason.isCanceled)); 

cancelablePromise.cancel(); // Cancel the promise 

bağlantılı makalede daha fazla yaklaşık makeCancelable okuyun. Sonuç olarak, değişkenleri ayarlayarak ve bileşenin takılı olup olmadığını kontrol ederek bu sorunu düzeltmeye çalışmayın, sorunun kökenine gidin. Üste Herhangi biriyle gelebilirseniz, lütfen diğer yaygın vakalarla yorum yapın.