Невозможно setState () с прослушивателем базы данных Firebase

Question

Я пытаюсь построить мини-игру с комнатами. Когда я пытаюсь получить информацию о комнате из моей базы данных в реальном времени firebase, я использовал функцию database.ref (). On (), чтобы прослушивать любые изменения данных и устанавливать свое состояние в соответствии с изменением. Вот как выглядит код:

export default class Room extends Component {
  state = {
    room: null,
    username: "sdff",
  };

  componentWillMount() {
    const roomId = this.props.location.pathname;
    app()
      .database()
      .ref(`/rooms${roomId}`)
      .on("value", (snapshot) => {
        const data = snapshot.val();
        console.log(data);
        this.setState({ room: data });
        this.setState({ room: "hello" });
      });
  }

Когда я выполняю console.log (data), я действительно вижу, что данные содержат всю информацию, которую я хочу. Однако this.setState не работает, что приводит к сбою отображения страницы, поскольку большая часть информации из состояния используется в render (). Даже если я установил для комнаты значение «hello», как показано в последнем операторе фрагмента кода, он все равно не сможет установить состояние. Мне интересно, это потому, что render () вызывается до того, как данные будут успешно извлечены? Если да, то как я могу это исправить? Заранее спасибо.

Answer 1

Думаю, вам понадобится componentDidMount () .

Как говорится в официальных документах React:

Этот метод - хорошее место для настройки любых подписок

Также не забудьте завершить подписку на componentWillUnmount ()