Firebase ref.on('value') 连续调用，即使没有变化答案

【问题标题】：Firebase ref.on('value') continuously calls, even when there is no changeFirebase ref.on('value') 连续调用，即使没有变化
【发布时间】：2021-06-04 11:29:30
【问题描述】：

我正在使用事件侦听器来检查实时数据库的更改。

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

我不断收到太多的重新渲染。 Firebase 文档说它只应该在孩子发生变化时更新。我做错什么了吗？有解决办法吗？

【问题讨论】：

这似乎出乎意料，但我在您分享的代码中没有看到任何可以解释它的内容。无论如何，您可以在 jsbin 或 stackblitz 之类的网站上设置最小复制，以便我看一下吗？

标签： javascript reactjs firebase firebase-realtime-database

【解决方案1】：

问题很可能是您问题中的代码针对每次渲染运行、更改状态并因此重新渲染。阿拉无限循环

尝试使用useEffect hook。删除cleanup中的监听器的奖励积分

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)
}, [])

【讨论】：