React中数组map操作时order.orderItems未定义类型错误如何解决

报错1：GET /ordersdescription/xxx 404 Not Found 解决方法 #

• 检查前端react-router路由配置，确认是否注册了和访问路径完全匹配的路由规则，重点排查路径拼写、大小写是否和跳转目标一致，比如是否错写为/ordersDescription/:orderid、/order-description/:orderid这类不匹配的格式。
• 如果是刷新页面才触发404，开发环境需要在webpack devServer配置中添加historyApiFallback: true；生产环境需要配置Nginx、Node服务等后端服务的单页应用路由 fallback规则，把所有页面请求都指向index.html。

报错2：TypeError: order.orderItems is undefined 解决方法 #

• 补全useEffect依赖项，将match.params.orderid加入依赖数组，避免订单id变化时不会重新拉取数据：

useEffect(() => {
  if (match.params.orderid) {
    dispatch(getOrderById(match.params.orderid));
  }
}, [dispatch, match.params.orderid]);

• 给属性访问加兜底校验，使用可选链+默认值避免访问不存在的属性报错，将map遍历的代码替换为：

{order?.orderItems?.map((item) => {
  // 原有渲染逻辑不变
}) || <p>暂无订单商品数据</p>}

也可以加前置数组校验：

{order && Array.isArray(order.orderItems) && order.orderItems.map(/*原有逻辑*/)}

• 检查getOrderByIdReducer的初始状态，确认初始order值设为null而非空对象{}：空对象在order &&判断中会返回真，但本身没有orderItems属性，会触发报错。
• 检查reducer中GET_ORDERBYID_SUCCESS分支的逻辑，确认接口返回的res.data结构符合预期，orderItems字段被正确挂载到order对象下，可在axios请求的then分支打印res.data确认接口返回结构。
• 补全接口异常处理逻辑：在orderActions的axios请求后添加catch分支，请求失败时dispatch对应失败action，reducer中失败状态下要将order置为null、关闭loading，避免异常状态下的错误数据渲染。

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