Reagować, jak poprawnie usunąć listę uczestników w componentWillUnmount, dlaczego potrzebuję powiązania w konstruktorze?

Question

jestem nieco zdezorientowany, jaka jest różnica pomiędzy tym sintax:

constructor(props) { 
    super(props); 
    this.state = { 
     openPane: false 
    } 
    this.togglePaneHelper = this.togglePaneHelper.bind(this); 
    } 
    componentDidMount() { 
    document.body.addEventListener('click', this.togglePaneHelper); 
    } 
    componentWillUnmount() { 
    document.body.removeEventListener('click', this.togglePaneHelper); 
    } 

i ten:

constructor(props) { 
    super(props); 
    this.state = { 
     openPane: false 
    } 
    } 
    componentDidMount() { 
    document.body.addEventListener('click', this.togglePaneHelper.bind(this)); 
    } 
    componentWillUnmount() { 
    document.body.removeEventListener('click', this.togglePaneHelper); 
    } 

Moim problemem jest to, że druga składnia nie jest poprawnie i usunięciu listner powodować to ostrzeżenie:

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 undefined component. 

Answer 1

Ważne:

a.bind(this) !== a.bind(this) 

Według MDN:

bind() metoda tworzy nową funkcję, że kiedy nazywa, ma swoje słowo kluczowe ustawiony na podanej wartości z danej sekwencji argumentów poprzedzające wszelkie dostarczone podczas wywoływania nowej funkcji.

Twoje pierwsze podejście zastępuje this.togglePaneHelper z nową, związaną funkcją. Drugi usuwa inną funkcję detektora zdarzeń, niż została dodana - zarówno , jak i removeEventListener muszą uzyskać tę samą funkcję.