订单历史页报错：Cannot read properties of undefined (reading 'get')

核心问题分析 #

从代码和现象来看，前端根本没有成功发送请求（后端无日志），同时前端存在渲染逻辑错误，导致数据无法正常展示。以下是具体问题和修复方案：

前端（screen.js）问题修复 #

1. Axios导入错误 #

当前代码：

import { axios } from "axios";

错误原因：Axios是默认导出，不是命名导出，这种写法会导致axios变量为undefined，无法发起请求。
修复：改为默认导入：

import axios from "axios";

2. 数组映射未返回JSX #

当前代码：

{orders.map((order) => {
  <tr key={order._id}>...</tr>;
})}

错误原因：箭头函数用大括号包裹时，必须显式returnJSX元素，否则映射结果为undefined，页面渲染空内容。
修复：改为括号包裹（隐式返回）或添加return：

// 方式1：隐式返回
{orders.map((order) => (
  <tr key={order._id}>...</tr>
))}

// 方式2：显式return
{orders.map((order) => {
  return <tr key={order._id}>...</tr>;
})}

3. 方法名拼写错误 #

当前代码：

{order.totalPrice.tofixed(2)}

错误原因：tofixed应为toFixed（大写F），这是JavaScript内置方法的正确写法，拼写错误会导致报错。
修复：

{order.totalPrice.toFixed(2)}

后端（orderRoutes.js）优化点 #

1. 空数组判断逻辑问题 #

当前代码：

if (orders) {
  console.log("these are the orders: " + orders);
  res.send(orders);
} else {
  console.log("Order not found");
}

错误原因：Order.find()返回空数组时，orders是truthy值（空数组在JS中不等于false），所以永远不会进入else分支。
修复：判断数组长度，或者直接返回结果（前端可处理空数组）：

const orders = await Order.find({ user: req.user._id });
console.log("these are the orders: ", orders); // 用逗号避免数组转为字符串
if (orders.length === 0) {
  console.log("No orders found for this user");
}
res.send(orders);

2. 确认路由挂载 #

确保orderRouter已正确挂载到主Express应用中，比如在主入口文件（如server.js）中添加：

import orderRouter from './routes/orderRoutes.js';
app.use('/api/orders', orderRouter);

如果未挂载，请求会无法到达后端路由。

内容的提问来源于stack exchange，提问作者Cyan the Computer Scientist