React useEffect异步请求慢导致order.tableId初始为undefined问题

React组件的首次渲染是同步执行的，useEffect的执行时机是组件完成首次挂载渲染之后，你在useEffect里调用的getOrder是异步接口请求，首次渲染走到条件判断逻辑时，order还是你初始化的空数组，order.tableId为undefined，会直接进入else分支渲染错误内容；等异步请求返回、setOrder更新状态后才会触发重渲染，这就是首次渲染不符合预期的核心原因。
另外你的代码里还有两个隐性问题：

• order的初始值设为空数组[]，但接口返回的订单是对象类型，类型不一致容易引发隐式报错
• URL查询参数取到的tableID是字符串类型，如果接口返回的tableId是数字类型，直接用===全等判断会出现值相等但类型不匹配、判断失效的问题

1. 新增订单加载状态，接口请求未完成时不执行业务条件判断，避免空值参与逻辑
2. 修正order初始值类型，和接口返回的对象类型对齐
3. 条件判断时加可选链兜底，同时统一两边比较值的类型，避免判断失效

首先修改状态初始化部分：

// 原代码：const [order, setOrder] = useState([]);
// 修改为：
const [order, setOrder] = useState(null);
// 新增订单加载状态
const [orderLoading, setOrderLoading] = useState(true);

修改getOrder方法，接入加载状态控制：

const getOrder = async () => {
  try {
    setOrderLoading(true);
    const response = await axios.post('http://192.168.1.50:9000/getOrder', {
      tableID: tableID,
    });
    setOrder(response.data);
  } catch (err) {
    // 可自行补充错误提示逻辑
    console.error('获取订单信息失败', err);
  } finally {
    setOrderLoading(false);
  }
}

修改最外层的渲染判断逻辑，优先处理加载状态：

// 接口请求中时渲染加载占位
if (orderLoading) {
  return <div>页面加载中，请稍候...</div>
}

// 加载完成后再执行业务判断，统一转成字符串避免类型不匹配问题
if (String(order?.tableId) === String(tableID)) {
  return (
    <>
      <h1>Text Example</h1>
    </>
  )
} else {
  // 此处保留你原else分支的菜单、购物车等全部页面代码
  return <>/* 原有业务页面内容 */</>
}

你当前useEffect的依赖数组为空，但内部调用的getOrder依赖了组件作用域内的tableID变量，虽然当前场景下tableID从URL取值不会变化，但React严格模式会抛出依赖缺失警告，可根据实际场景将tableID加入useEffect依赖数组，避免闭包导致的取值过时问题。

内容的提问来源于stack exchange，提问作者SERGIO GARCÍA GONZÁLEZ