React中Axios请求后使用可选链仍触发TypeError报错问题

你的问题出在两个核心点上：

1. 可选链覆盖不完整
   你当前的代码是deliveredOrders?.delivered[0]?.updatedAt，这里可选链只作用到了delivered，但如果delivered本身是undefined（比如组件首次渲染、接口返回数据异常时），访问delivered[0]依然会触发报错。

   正确写法需要给数组索引也加上可选链：

   console.log(deliveredOrders?.delivered?.[0]?.updatedAt);
   

2. 初始状态与接口返回结构不匹配
   你初始化deliveredOrders为数组[]，但从代码逻辑来看，接口返回的res.data应该是一个包含delivered数组的对象（比如{ delivered: [...] }）。初始状态设为数组会导致首次渲染时，deliveredOrders?.delivered直接是undefined（数组不存在delivered属性），这也是报错的诱因之一。

   应将初始状态改为空对象：

   const [deliveredOrders, setDeliveredOrders] = useState({});
   

最后建议你确认接口返回的res.data结构确实包含delivered数组，避免因后端数据不符合预期导致的后续问题。

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