Блог

Главная - Вопросы по программированию - Не понимаю, почему мне нужно отказаться от подписки в componentWillUnmount()

Не понимаю, почему мне нужно отказаться от подписки в componentWillUnmount()

# #reactjs #firebase #firebase-authentication

Вопрос:

Я не понимаю, почему я должен звонить unsubscribeFromAuth() в componentWillUnmount полицию .

В строке 11 я объявляю переменную unsubscribeFromAuth = null . Затем я назначил auth.onAuthStateChanged его ComponentDidMount на 21-ю строчку. Затем на 27-й линии я звоню unsubscribeFromAuth() componentWillUnmount .

Я знаю, как componentWillUnmount это работает, но я не в состоянии понять этот конкретный сценарий. Кто-нибудь может это объяснить?

Код

 import React from 'react';
import { Route, Switch } from 'react-router-dom';
import './App.css';
import Header from './components/header/header.component';
import { auth } from './firebase/firebase.utils';
import Homepage from './pages/homepage/homepage.components';
import ShopPage from './pages/shop/shop.component';
import SignInAndSignOut from './pages/sign-in-and-sign-out-page/sign-in-and-sign-out-page.component';

class App extends React.Component {
  unsubscribeFromAuth = null;  // line 11

  constructor() {
    super();
    this.state = {
      currentUser: null,
    };
  }

  componentDidMount() {
    this.unsubscribeFromAuth = auth.onAuthStateChanged((user) => { // line 21
      this.setState({ currentUser: user });
    });
  }

  componentWillUnmount() {
    this.unsubscribeFromAuth(); // line 27
  }

  render() {
    const { currentUser } = this.state;

    return (
      <div>
        <Header currentUser={currentUser} />
        <Switch>
          <Route exact path="/" component={Homepage} />
          <Route exact path="/shop" component={ShopPage} />
          <Route exact path="/signin" component={SignInAndSignOut} />
        </Switch>
      </div>
    );
  }
}

export default App;

Комментарии:

1. Без отмены подписки, когда компонент размонтирован, изменения в состоянии аутентификации будут продолжать вызывать setState вызовы. Это приведет к предупреждениям о том, что это «не работает», так как вы не можете установить состояние для компонента, который больше не существует.

2. извините, что говорю, но я пока не понимаю, не могли бы вы поподробнее, пожалуйста?

Ответ №1:

onAuthStateChanged принимает функцию для наблюдения за изменениями в состоянии входа пользователя.

Другими словами, как вы, вероятно, уже знаете, функция, которую вы передаете, будет вызываться каждый раз, когда пользователь входит или выходит и т. Д…

Как только ваш компонент больше не существует (отключается), вам не нужно постоянно получать обновления об изменениях входа. На самом деле, ваша функция даже больше не может работать правильно, потому this что in this.setState -это компонент, который больше не существует.

Если вы ничего не предпримете по этому поводу, React подаст жалобу в консоль с сообщением (если функция сработает).:

Можно обновить только установленный или монтируемый компонент. Обычно это означает, что вы вызвали setState() для размонтированного компонента. Это не операция. Пожалуйста, проверьте код для неопределенного компонента.

Чтобы устранить это предупреждение/ошибку, вам просто нужно сообщить firebase, что вам больше не нужно получать эти обновления, вызвав возвращенную функцию отмены подписки.

Вызов этого просто сообщает firebase о прекращении использования предоставленной вами функции, если состояние аутентификации снова изменится.

Метки: ,