使用useEffect获取Firestore数据仅重渲染时生效问题咨询

我在React项目中编写了如下代码，尝试在组件挂载阶段通过useEffect从Firestore拉取存储的数据：

import React, { useEffect, useState } from 'react';
import { getDocs, collection } from 'firebase/firestore';
import { db } from '../firebase-config';


const Home = () => {

    const [postList, setPostList] = useState([]);
    const postsCollectionRef = collection(db, "data");

    useEffect(() => {
        const getPosts = async () => {
            const data = await getDocs(postsCollectionRef);
            let postListArray = []
            data.forEach((doc) => {
                const post = { ...doc.data() }
                postListArray.push(post)
            });
            setPostList(postListArray)
        };
        getPosts();
        console.log(postList);
    }, []);


    return (
        <div>test</div>
    );
};

export default Home;

页面首次加载时，控制台打印的postList为空数组；但只要我修改任意代码，例如将返回部分的代码修改为：

return (
        <div>test_epic</div>
    );

触发组件重渲染后，控制台就能正常打印出获取到的数组数据。两次运行效果如下：

• 首次加载页面运行效果
• 修改代码触发重渲染后运行效果

这个现象和Firestore请求无关，是React闭包特性和异步执行顺序导致的必然结果：

• getPosts是异步函数，调用getPosts()后会立刻发起请求但不会阻塞后续代码执行，此时await getDocs(...)还没返回结果，setPostList根本没执行，后续的console.log(postList)拿到的是当前渲染闭包里的初始状态值，也就是空数组。
• React的状态更新不会修改当前作用域内的state变量，只会触发组件重渲染，更新后的值只会出现在下一次渲染产生的新闭包中。你修改代码触发热更新时，组件被强制重渲染，此时之前的异步请求早已完成、状态已经更新，所以打印出来的就是正常的数组数据。

根据你的调试需求选对应方案即可：

1. 调试请求结果时，直接打印本地组装的数组即可，不需要读state

   useEffect(() => {
       const getPosts = async () => {
           const data = await getDocs(postsCollectionRef);
           let postListArray = []
           data.forEach((doc) => {
               const post = { ...doc.data() }
               postListArray.push(post)
           });
           console.log('请求拿到的数据：', postListArray) // 直接打印本地变量，结果准确
           setPostList(postListArray)
       };
       getPosts();
   }, []);
   

2. 如果需要确认state更新后的值，单独加一个依赖postList的副作用即可

   // 原数据拉取逻辑去掉console即可
   useEffect(() => {
       const getPosts = async () => {
           const data = await getDocs(postsCollectionRef);
           let postListArray = []
           data.forEach((doc) => {
               const post = { ...doc.data() }
               postListArray.push(post)
           });
           setPostList(postListArray)
       };
       getPosts();
   }, []);
   
   // 单独监听state变化，每次更新都会执行
   useEffect(() => {
       console.log('当前postList状态值：', postList)
   }, [postList])
   

补充说明：如果你的目的是在页面上渲染拉取到的数据，完全不需要额外修改逻辑——只要在JSX中读取postList做渲染，状态更新触发重渲染后页面会自动展示最新数据，首次渲染打印空数组不影响实际功能。

内容的提问来源于stack exchange，提问作者Nooba Noobie