React从Firebase实时数据库取数后设置状态触发无限循环求助

问题原因 #

你把Firebase数据请求和状态更新逻辑直接写在组件顶层代码里，没做执行限制：

• 组件首次渲染时，执行数据请求，拿到数据后调用setPost(users)更新状态
• 状态更新触发组件重渲染，顶层代码再次执行，重新发起请求并调用setPost
• 反复循环就导致了无限渲染

修复方案 #

用React的useEffect钩子包裹数据获取逻辑，设置空依赖数组，让这段代码只在组件挂载时执行一次：

import { useState, useEffect } from 'react';
// 导入你的Firebase相关模块

function YourComponent() {
  const [post, setPost] = useState([]);

  useEffect(() => {
    const starCountRef = ref(db);
    get(child(starCountRef, "post")).then((snapshot) => {
      if (snapshot.exists()) {
        const users = [];
        snapshot.forEach(childSnapshot => {
          users.push(childSnapshot.val()); 
        });
        setPost(users);  
      } else {
        console.log("未找到post数据");
      }
    }).catch((error) => {
      console.error(error);
    });
  }, []); // 空依赖数组：仅组件挂载时执行一次

  console.log(post);
  return <div>{/* 你的组件内容 */}</div>;
}

补充说明 #

• 把users数组放到useEffect内部声明，避免每次组件渲染都重复创建变量，代码更规范
• 空依赖数组[]的作用是告诉React，这个副作用不需要依赖任何状态或props，只会在组件挂载时执行一次，不会因为状态更新重复触发

内容的提问来源于stack exchange，提问作者Jayur Pithava