如何在 javascript 中映射 JSON 数据时处理 null 值

Question

我必须通过看起来类似于此的数据 map，

"data": {
    "16450603807212420": [
        {
            "mall_id": 4,
             ... more entries
            "order_data": [
                {
                    "detail_order_id": 464,
                    "order_id": "16450603807212420",
                    "order_status": 200,
                    "goods_id": 1000000019,
                       ... more entries
                },
                {
                    "detail_order_id": 465,
                     ... more entries
                }
            ]
        },
        {
            "mall_id": 4,
              ... more entries
            "order_data": [
                {
                    "detail_order_id": 466,
                     ... more entries
                }
            ]
        }
    ],
    "16450603807212421": [null],
    "16450603807212422": [
        {
            "mall_id": 4,
               ... more entries
            "order_data": [
                {
                    "detail_order_id": 467,
                    ... more entries
                },
                {
                    "detail_order_id": 468,
                   ... more entries
                }
            ]
        }
    ],
    "16450603807212423": [
        {
            "mall_id": 4,
               ... more entries
            "order_data": [
                {
                    "detail_order_id": 467,
                    ... more entries
                },
                {
                  null
                }
            ]
        }
    ]
}

我的 map Function 看起来像这样

 <div>
          {orderValues?.map((data, idx) => (
            <div key={idx}>
              {data?.map((order, index) => (
                <div key={index}>
                  <OrderListProduct
                    date={order.created_at}
                    orderType={order.delivery_option_name}
                    product_info={order.order_data}
                  />
                </div>
              ))}
            </div>
          ))}
        </div>

为了map里面的数据每个键值为“16450----”这是一个订单Id。 我不应该在数据中包含 null 但发生了一些错误并收到了上面看起来的数据，我的 map function 无法处理。 包含 null 值的数据问题已从后端修复，但我仍然希望我的 map function 能够在我收到 null 数据时处理。

帮助将不胜感激！！！

Answer 1

您可以使用 map 中的 if，或者预先过滤它们。 还可选更改运算符？。

<div>
          {orderValues?.map((data, idx) => (
            <div key={idx}>
              {data?.map((order, index) => {
                if(!order) { ... }
                else {
                return (
                <div key={index}>
                  <OrderListProduct
                    date={order?.created_at}
                    orderType={order?.delivery_option_name}
                    product_info={order?.order_data}
                  />
                </div>
                )}}
              )}
            </div>
          ))}
        </div>

Answer 2

只需在 map 函数的返回语句之前检查 null 或未定义的值

        <div>
          {orderValues?.map((data, idx) => (
            <div key={idx}>
              {data?.map((order, index) => order && (
                <div key={index}>
                  <OrderListProduct
                    date={order.created_at}
                    orderType={order.delivery_option_name}
                    product_info={order.order_data}
                  />
                </div>
              ))}
            </div>
          ))}
        </div>