问题很可能是您问题中的代码在每次渲染时运行，更改状态，从而重新渲染。Ala无限循环
尝试使用useEffect hook。在清理中删除侦听器的加分

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

使用V9SDK看起来有些不同。

useEffect(() => {
  const chatRef = ref(db, `users/${sender}/chat/`);

  // return the unsubscribe function
  return onValue(chatRef, (snapshot) => {
    setChats(snapshot.val());
  });
}, [sender]);