Присоединение / отсоединение слушателей в React

Question

У меня есть компонент, который, в зависимости от его свойства (listId), прослушивает другой документ в базе данных Firestore.

Однако, когда я обновляю компонент, чтобы использовать новый listId, он все еще использует предыдущий слушатель.

Какой правильный способ отсоединить старый слушатель и запустить новый, когда компонент получает новые реквизиты?

Некоторые коды:

import React from 'react';
import PropTypes from 'prop-types';
import { db } from '../api/firebase';

class TodoList extends React.Component {
  state = {
    todos: [],
  };

  componentWillMount() {
    const { listId } = this.props;
    db.collection(`lists/${listId}/todos`).onSnapshot((doc) => {
       const todos = [];

       doc.forEach((t) => {
         todos.push(t.data());
       });

       this.setState({ todos });
     });
   };

  render() {
    const { todos } = this.state;
    return (
        {todos.map(t => <li>{t.title}</li>)}
    );
  }
}

TodoList.propTypes = {
  listId: PropTypes.object.isRequired,
};

export default TodoList;

Я пытался использовать componentWillUnmount(), но компонент никогда не отключается, он просто получает новые реквизиты от родителя.

Я подозреваю, что мне нужно что-то вроде getDerivedStateFromProps(), но я не уверен, как правильно обрабатывать присоединение / отсоединение слушателя.

Answer 1

Передача key реквизита TodoList позволяет компоненту вести себя как следует.