Ссылка Firebase на ("значение") постоянно вызывает, даже если никаких изменений нет

# #javascript #reactjs #firebase #firebase-realtime-database

Вопрос:

Я использую прослушиватель событий для проверки изменений в моей базе данных в реальном времени.

   const [chats, setChats] = useState({});
  const ref = db.ref(`users/${sender}/chat/`);
  ref.on('value', (snapshot) => {
    const data = snapshot.val();
    setChats(data);
  });

Я продолжаю получать слишком много повторных рендеров. В документах Firebase говорится, что он должен обновляться только при изменении детей. Я сделал что-то не так? Есть ли обходной путь?

1. Это кажется неожиданным, но я не вижу в коде, которым вы поделились, ничего, что могло бы это объяснить. Есть ли в любом случае возможность настроить минимальное воспроизведение на сайте, таком как jsbin или stackblitz, чтобы я мог взглянуть на него?

Ответ №1:

Проблема, скорее всего, в том, что код в вашем вопросе выполняется для каждого рендеринга, изменяет состояние и, следовательно, повторно рендерит. Ала бесконечный цикл

Попробуйте воспользоваться useEffect крючком. Бонусные баллы за удаление прослушивателя при очистке

 const [chats, setChats] = useState({});
useEffect(() => {
  const ref = db.ref(`users/${sender}/chat/`);

  // value listener function
  const onValue = snapshot => {
    setChats(snapshot.val())
  }
  
  // register listener
  ref.on('value', onValue);

  // return a cleanup function to remove the listener
  return () => ref.off("value", onValue)
}, [])