React中forEach逻辑正常但渲染不显示问题求助

嘿，我来帮你看看为啥挑战名称没显示出来——核心问题出在React的状态管理逻辑上，咱们一步步拆解：

到底哪里出问题了？ #

1. 全局变量size无法触发组件重渲染
   你用了全局变量size来存挑战数据，但React组件只有在状态（state）或属性（props）变化时才会重新渲染。当fetchData异步拿到数据后，你只是把值赋给了全局size，但组件完全没感知到这个变化。等到allowProgressBar调用setShowProgressBar(true)触发重渲染时，组件当前渲染周期里的size还是初始空数组，所以createMultipleProgressBars遍历的是空数组，自然生成不了带挑战名称的JSX。

2. email可能在组件初始化时为undefined
   组件刚挂载时，firebase.auth().currentUser可能还没完成初始化，导致email是undefined，后续的数据库请求会因为无效的doc(email)失败，数据根本没拿到。

一步步修复 #

1. 把size改成React状态变量

用useState声明size，这样更新时会自动触发组件重渲染：

export default function Dashboard() {
  // 替换全局size为状态变量
  const [size, setSize] = useState([]);
  const [user, setUser] = useState(firebase.auth().currentUser);
  const [email, setEmail] = useState(user?.email);
  
  const [showProgressBar, setShowProgressBar] = useState(false);
  // ... 其他代码

2. 修正异步数据获取逻辑

不再用全局变量存数据，改用状态更新函数，同时处理email为空的情况：

useEffect(() => {
  const fetchData = async () => {
    if (!email) return; // 避免email为空时请求出错
    const challs = [];
    const snapshot = await database
      .collection("Users")
      .doc(email)
      .collection("ChosenChallenge")
      .get();
    
    snapshot.docs.forEach((doc) => {
      challs.push(doc.data().chall);
    });
    
    setSize(challs); // 用状态更新替换全局赋值
    if (challs.length > 0) {
      setShowProgressBar(true); // 直接设置状态，不需要单独的allowProgressBar函数
    }
  };

  fetchData();
}, [email]); // 依赖email，当email变化时重新请求

3. 简化createMultipleProgressBars函数

现在size是状态变量，函数可以直接基于最新的size生成JSX：

function createMultipleProgressBars() {
  console.log("create Method called with size:", size);
  return (
    <div>
      {size.map(challenge => ( // 用map更简洁，key要确保唯一
        <div key={challenge}>
          <p>{challenge}</p>
        </div>
      ))}
    </div>
  );
}

4. 修复用户状态监听与第二个useEffect

添加firebase auth状态监听，确保user和email能实时更新；同时修正第二个useEffect的依赖问题：

// 监听用户登录状态变化
useEffect(() => {
  const unsubscribe = firebase.auth().onAuthStateChanged((currentUser) => {
    setUser(currentUser);
    setEmail(currentUser?.email);
  });
  
  return () => unsubscribe(); // 组件卸载时取消监听
}, []);

// 修正用户信息写入逻辑
useEffect(() => {
  if (!user || !email) return;
  database
    .collection("Users")
    .doc(email)
    .set({
      name: user.displayName,
      co2: 0
    }, { merge: true }) // 加上merge避免覆盖已有数据
    .then(() => {
      console.log("added!");
    });
}, [user, email]); // 添加依赖，避免无效重复执行

修复后效果 #

当异步请求拿到挑战数据后，setSize(challs)会触发组件重渲染，此时createMultipleProgressBars能拿到最新的size数组，对应的挑战名称就会正常显示在页面上了。

内容的提问来源于stack exchange，提问作者Anna Wojciechowska