在useEffect中从Firestore取数设状态，首次渲染失效问题

问题重现 #

以下是从Firebase Firestore获取数据并更新状态的代码：

const { firebase } = useContext(FirebaseContext)
const [products, setProducts] = useState([])                                        
const db=firebase.firestore();

useEffect(() => {
  const unsubscribe = db.collection("products").onSnapshot((snapshot) => {
    const newProducts = snapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
    }));
    setProducts(newProducts);
    console.log(products); // 首次执行时输出空数组
  });

  return () => unsubscribe();
}, []);

首次渲染时console.log(products)输出空数组，但newProducts已正确获取到Firestore数据。刷新浏览器后组件无法渲染产品信息，只有热重载后才能正常显示。

组件渲染代码片段：

return (
  products.map(product => (
    <div key={product.id}>
      <h4>{product.name}</h4>
      <p>{product.price}</p>
      <p>{product.type}</p>
    </div>
  ))
)

原因解析 #

1. setState的异步特性：调用setProducts(newProducts)后，React不会立即更新products状态，当前useEffect回调里的products还是初始的空数组，所以console.log输出旧值。
2. 初始状态为空导致的渲染问题：组件首次渲染时products是空数组，map遍历不会生成任何DOM元素，所以页面看不到产品信息。

解决方案 #

1. 正确查看状态更新结果 #

如果需要确认状态是否更新，不要在setProducts之后立即打印products，可以：

• 直接打印newProducts，因为它已经是最新的数据源；
• 或者添加一个监听products变化的useEffect：

useEffect(() => {
  console.log("更新后的products:", products);
}, [products]);

2. 添加加载状态处理 #

在数据加载完成前显示加载提示，避免页面空白，同时确保只有在数据存在时才渲染产品列表：

const { firebase } = useContext(FirebaseContext)
const [products, setProducts] = useState([])
const [isLoading, setIsLoading] = useState(true) // 新增加载状态
const db=firebase.firestore();

useEffect(() => {
  const unsubscribe = db.collection("products").onSnapshot((snapshot) => {
    const newProducts = snapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
    }));
    setProducts(newProducts);
    setIsLoading(false); // 数据获取完成后关闭加载状态
  });

  return () => unsubscribe();
}, []);

// 渲染逻辑
if (isLoading) {
  return <div>加载中...</div>;
}

return (
  <div>
    {products.length === 0 ? (
      <div>暂无产品数据</div>
    ) : (
      products.map(product => (
        <div key={product.id}>
          <h4>{product.name}</h4>
          <p>{product.price}</p>
          <p>{product.type}</p>
        </div>
      ))
    )}
  </div>
)

3. 可选：使用条件渲染跳过空数据的遍历 #

如果不想添加加载状态，也可以直接在渲染时判断products是否有数据：

return (
  <div>
    {products.map(product => (
      <div key={product.id}>
        <h4>{product.name}</h4>
        <p>{product.price}</p>
        <p>{product.type}</p>
      </div>
    ))}
    {products.length === 0 && !isLoading && <div>暂无产品</div>}
  </div>
)

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