ES6嵌套数组对象属性访问：Redux场景下多层数组取值与遍历求助

错误原因 #

你的client.data是长度为2的嵌套数组结构：

• 索引0对应的子数组存储用户信息，仅含1个用户对象
• 索引1对应的子数组存储订单列表，包含多个订单对象
  之前直接访问索引1报错有两个常见原因：

1. 你在遍历client.data的回调中访问子数组索引1时，第一个遍历项是长度仅为1的用户子数组，访问[1]会得到undefined，读取属性就会抛出异常
2. Redux异步请求数据场景下，首次渲染时client.data可能还未赋值，是空数组/undefined，直接访问索引1会触发报错

需求1：获取第二个数组长度&遍历 #

使用可选链+默认值做兼容，避免数据未加载时的报错即可：

// 安全获取订单子数组，数据未加载时默认是空数组
const orderList = client.data?.[1] || [];
// 获取数组长度
const orderLength = orderList.length;

// 遍历示例：渲染所有订单的类型和金额
const orderRenderList = orderList.map(order => (
  <div key={order.id}>
    订单类型：{order.order_type} | 订单金额：{order.price}
  </div>
));

如果想让代码更清晰，可以提前对client.data做结构赋值：

const [userSubList = [], orderSubList = []] = client.data || [];
// 之后直接使用两个变量即可，不需要重复写索引
const fullName = userSubList[0]?.full_name;
const orderCount = orderSubList.length;

需求2：访问数组指定对象的属性 #

以获取第二个订单对象（索引为1）的amount_paid字段为例，做全链路兼容处理即可：

// 可选链兼容所有异常场景，没有对应数据时返回默认值0.00
const secondOrderAmount = client.data?.[1]?.[1]?.amount_paid || '0.00';

内容的提问来源于stack exchange，提问作者chablis-omoba