如何在 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>