如何访问嵌套数组对象中的order_item_name？解决undefined报错

你遇到的undefined错误根源很明确——循环变量复用踩坑了！你的代码里用同一个i既遍历外层的订单数组props.allOrdersState，又用来访问每个订单里的order_items[i]，这完全不合理：每个订单的order_items是独立的数组，它的索引和外层订单的索引根本没关系，而且当某个订单的order_items长度小于当前的i时，直接取order_items[i]就会得到undefined，再去访问item.order_item_name自然就报错了。

举个实际的例子：假设props.allOrdersState有3个订单，第一个订单只有2个订单项，当i=2时，props.allOrdersState[2]['order_items'][2]就会是undefined，这时候访问item.order_item_name肯定出问题。

你需要给每个订单单独遍历它自己的order_items数组，别再复用外层的循环变量了。这里推荐用Array.map()来简化代码，同时避免索引混乱：

const ordersTest = props.allOrdersState.map(order => {
  // 单独处理当前订单的所有订单项
  const orderItems = order.order_items?.map(itemObj => ({
    itemName: itemObj.item?.order_item_name || ''
  })) || [];

  return {
    state: order.customer?.state || '',
    first_name: order.customer?.first_name || '',
    orderItems: orderItems
  };
});

几个关键改进： #

• 用map()遍历外层订单数组，每个订单单独处理，不用手动管索引，省心还不容易错
• 对每个订单的order_items单独用map()遍历，生成对应的itemName数组
• 用**可选链?.和空值合并||**处理可能的空值，就算某个字段缺失也不会直接报错
• 删掉了冗余的props.allOrdersState.length判断，因为map()在空数组上会返回空数组，没必要额外判断

如果你的项目还需要兼容不支持可选链的旧浏览器，可以用条件判断替代：

const ordersTest = [];
for (let i = 0; i < props.allOrdersState.length; i++) {
  const currentOrder = props.allOrdersState[i];
  const orderItems = [];

  // 单独遍历当前订单的订单项，用j做索引，和外层的i彻底分开
  if (currentOrder.order_items && currentOrder.order_items.length) {
    for (let j = 0; j < currentOrder.order_items.length; j++) {
      const itemObj = currentOrder.order_items[j];
      orderItems.push({
        itemName: itemObj && itemObj.item ? itemObj.item.order_item_name : ''
      });
    }
  }

  ordersTest.push({
    state: currentOrder.customer && currentOrder.customer.state ? currentOrder.customer.state : '',
    first_name: currentOrder.customer && currentOrder.customer.first_name ? currentOrder.customer.first_name : '',
    orderItems: orderItems
  });
}

这样就彻底解决了索引不匹配导致的undefined问题。

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