Czy istnieje sposób sprawdzenia, czy komponent reagowania nie jest podłączony?

Question

Mam usecase, gdzie muszę odmontować mój składnik reagowania. Ale w niektórych przypadkach dany składnik reagujący jest odmontowywany przez inną funkcję. Dlatego muszę sprawdzić, czy komponent jest zamontowany przed odmontowaniem go.

Answer 1

Od isMounted() jest oficjalnie przestarzała, można to zrobić w składniku:

componentDidMount() { 
    this._ismounted = true; 
} 

componentWillUnmount() { 
    this._ismounted = false; 
} 

Ten wzór utrzymania własnego state zmienną jest szczegółowo w dokumentacji ReactJS: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html

Answer 2

okazało się, że komponent zostanie odmontowany, wygeneruj wypełnienie tego var

if(!this._calledComponentWillUnmount)this.setState({vars});

Answer 3

Dostałem się tutaj, ponieważ szukałem sposobu na zatrzymanie interfejsu API polling.

W przypadku react docs obejmuje ona obudowę websocket, ale nie tę dotyczącą odpytywania.

Sposób pracowałem wokół niego

// React component 
let allowPolling = true 

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

to działa. Nadzieję, że pomoże

Proszę dać mi znać, jeśli znacie żadnego uszkodzonego przypadek testowy dla tego =]

Answer 4

myślę że Shubham odpowiedź jest rozwiązanie sugerowane przez reagują dla osób, które muszą przechodzić swój kod, aby zaprzestać używania Wzorzec przeciwwstrząsowy isMounted.

To nie musi być złe, ale warto wymienić prawdziwe rozwiązania tego problemu.

The article linked by Shubham oferuje 2 sugestie, aby uniknąć tego wzorca. Ten, którego potrzebujesz, zależy od tego, dlaczego wywołujesz setState, gdy komponent jest odmontowany.

jeśli używasz Flux sklep w swojej komponentu, należy wypisać w componentWillUnmount

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

Jeśli używasz ES6 obiecuje, może być konieczne, by zakończyć swoją obietnicę w celu dokonania to można anulować.

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 

Więcej o makeCancelable w połączonej artykułu.

Podsumowując, nie próbuj łatać tego problemu, ustawiając zmienne i sprawdzając, czy komponent jest zamontowany, przejdź do źródła problemu. Prosimy o komentarz w innych typowych przypadkach, jeśli możesz wymyślić jakiś.