React.js：useEffect调用外部函数无法访问useState状态的解决方法

问题场景 #

尝试在页面加载时通过useEffect()获取数据，遇到两个问题：

• 将const [orders, setOrders] = useState([])放在主组件函数外（试图设为全局）时，出现**"React useState cannot be called top level"**错误
• 将状态变量放在组件内部时，外部定义的fetchPost函数无法访问orders和setOrders，报错**'setOrders' is not defined**、'orders' is not defined

原错误代码：

function ActiveOrders () {
    
  const [orders, setOrders] = useState([]);
  
  useEffect(()=>{
    fetchPost();
  }, [])

}

const fetchPost = async () => {
   
  await getDocs(collection(db, "orders"))
      .then((querySnapshot)=>{               
          const newData = querySnapshot.docs
              .map((doc) => ({...doc.data(), id:doc.id }));
          setOrders(newData);                
          console.log(orders, newData);
      })
}

问题原因 #

1. React Hook（如useState）必须遵循只能在组件函数内部或自定义Hook内部调用的规则，不能放在全局作用域，否则触发报错。
2. fetchPost定义在组件外部，属于全局函数，无法访问组件内部的状态变量和状态更新函数（orders、setOrders）。

正确实现方式 #

将fetchPost函数移到组件内部，使其能访问组件的状态和状态更新函数；同时优化异步代码写法，避免混用await和.then()：

import { useState, useEffect } from 'react';
import { getDocs, collection } from 'firebase/firestore';
// 假设db是已初始化的Firestore实例

function ActiveOrders () {
  const [orders, setOrders] = useState([]);

  // 将fetchPost移到组件内部
  const fetchPost = async () => {
    try {
      const querySnapshot = await getDocs(collection(db, "orders"));
      const newData = querySnapshot.docs.map(doc => ({
        ...doc.data(),
        id: doc.id
      }));
      setOrders(newData);
      console.log(newData); // 若要查看更新后的orders，可通过额外useEffect监听
    } catch (error) {
      console.error('获取订单数据失败:', error);
    }
  };

  useEffect(() => {
    fetchPost();
  }, []);

  // 后续可渲染orders数据
  return (
    <div>
      {/* 渲染orders的逻辑 */}
    </div>
  );
}

补充说明 #

• 若想在状态更新后查看orders的最新值，不要在fetchPost内直接打印（状态更新是异步的），可添加额外的useEffect监听：

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

• 异步操作建议添加try/catch捕获错误，避免因网络或数据库问题导致组件崩溃。

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