如何在ReactJS的return函数中遍历嵌套数组？

嗨，我来帮你解决这个问题～首先得提一下，你给出的JSON格式有点小语法问题：数组（[]）里不能直接包含键值对结构，应该是一个对象（用{}包裹）。我先把它修正为有效的JSON结构，再一步步讲解遍历方法：

第一步：修正你的JSON数据结构 #

你提供的原始数据应该是类似这样的有效对象（外层是对象，对应键值为嵌套数组）：

{
  "5ac9b249970c2": [
    {
      "id": "376363",
      "price": "14400",
      "date": "2018-04-08 10:40:17",
      "user_id": "16433",
      "ip": "46.225.123.235",
      "code": "5ac9b249a0cc5",
      "succ": "1",
      "admin_seen": "1",
      "user_seen": "0",
      "coupon_id": "20821",
      "coupon_parent": "20821",
      "coupon_code": "195_2484C1_9873(7531)",
      "coupon_code_user": "7531",
      "coupon_code_partner": "195_2484C1_9873",
      "shop_id": "2484",
      "payment_type": "7",
      "merchent_type": "3",
      "merchent_id": "0"
    }
  ]
}

第二步：在React组件中遍历嵌套数据 #

假设你已经把这个数据存在组件的state或者props里（比如叫responseData），下面提供两种常用的遍历方式：

方式一：通用遍历（适用于外层有多个键的情况） #

如果你的外层对象可能有多个类似5ac9b249970c2的键，用Object.entries()把对象转换成键值对数组，再嵌套遍历：

function OrderList() {
  // 假设这是你从接口获取到的数据
  const responseData = {
    "5ac9b249970c2": [
      { /* 你的订单对象 */ }
    ]
  };

  return (
    <div className="order-container">
      {/* 遍历外层对象的每个键值对 */}
      {Object.entries(responseData).map(([groupKey, orderList]) => (
        <div key={groupKey} className="order-group">
          <h3>分组ID：{groupKey}</h3>
          {/* 遍历内层的订单数组 */}
          <ul>
            {orderList.map(order => (
              <li key={order.id} className="order-item">
                <p>订单ID：{order.id}</p>
                <p>价格：{order.price} 元</p>
                <p>创建时间：{order.date}</p>
                {/* 其他字段按需渲染 */}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

方式二：直接访问（适用于外层键固定的情况） #

如果你确定外层只有5ac9b249970c2这一个键，可以直接通过键名访问内层数组，简化代码：

function OrderList() {
  const responseData = {
    "5ac9b249970c2": [
      { /* 你的订单对象 */ }
    ]
  };

  return (
    <div className="order-container">
      <h3>分组ID：5ac9b249970c2</h3>
      <ul>
        {/* 直接遍历指定键对应的数组 */}
        {responseData["5ac9b249970c2"].map(order => (
          <li key={order.id} className="order-item">
            <p>订单ID：{order.id}</p>
            <p>价格：{order.price} 元</p>
            <p>创建时间：{order.date}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

几个重要的注意事项 #

• 添加唯一key：React要求每个列表项都要有唯一的key属性，这里用order.id是最稳妥的（因为ID通常是唯一标识），不要用数组索引作为key，避免渲染异常。
• 处理空数据：如果接口返回的数据可能为null或undefined，记得用可选链操作符?.避免报错，比如：responseData?.["5ac9b249970c2"]?.map(...)
• 如果原始数据确实是数组：如果你的接口返回的真的是数组包裹对象（比如[{ "5ac9b249970c2": [ ... ] }]），那可以先取数组的第一个元素再处理：responseData[0]?.["5ac9b249970c2"]?.map(...)

内容的提问来源于stack exchange，提问作者S.M_Emamian