无法使用 firebase firestore 对未安装的组件执行 React state 更新

Question

so.. i tried some similar answer here but non of theme work, and need to listen to live update from firestore db and i have to work with class component

always get this warning:

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

my code:

class Exchange extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      exchangePrice: 0,
      newExchangePrice: "",
    };
    this.updateExchangePrice = this.updateExchangePrice.bind(this);
  }

  updateExchangePrice() {
    const docRef = doc(db, "exchange", "exchange");
    if (
      this.state.newExchangePrice !== "" &&
      this.state.newExchangePrice !== 0
    ) {
      updateDoc(docRef, {
        exchange_price: Number(this.state.newExchangePrice),
      });
      this.setState({ newExchangePrice: "" });
    }
  }
  componentDidMount() {
    const exchanges = collection(db, "exchange");
    onSnapshot(exchanges, (x) => {
      x.docs.forEach((doc) => {
        if (doc.data().exchange_price !== this.state.exchangePrice) {
          this.setState({ exchangePrice: doc.data().exchange_price });
        }
      });
    });

  }

Answer 1

Memory leaks is an issue when implementing React code, when using side-effects. Explore more on this from here . Some side-effects require clean-up. And that clean-up can be done by the use of ComponentWillUnmount() life-cycle method in a class based component in React. Using the ComponentWillUnmount() method, you can do the necessary un-subscriptions there that you previously implemented.

You may have a look at the React official doc to explore more on the method.

Also, you may have a look at the Stackoverflow case .