點選 ID 包含英文的地點後，無法取得資料

[mingjunlu]

問題描述
某些地點在點選後，無法順利發 request 到 API（似乎是 ID 有包含英文的那些地點），DevTools 顯示的是 GET /places/undeinfed。關掉 ErrorScreen 後，該地點的圖示顏色維持不變。

重現步驟
重現此行為的步驟如下：

1. 連到 findmasks.tw
2. 找到一個 ID 包含英文的地點（例如桃園市的維昌藥師藥局，ID 是 593201A542）
3. 點選該地點的圖示（手機觸控或滑鼠點選皆可）

預期行為
點選地點之後，可以順利拿回資料，圖示顏色也會加深。

截圖

[mingjunlu]

直接手動發 request 的話，拿回來的資料正常，沒有異狀。推測問題應該出在前端 🤔

{
    "type": "Feature",
    "id": "593201A542",
    "geometry": {
        "type": "Point",
        "coordinates": [121.301756, 24.99217]
    },
    "properties": {
        "id": "593201A542",
        "name": "昌維藥師藥局",
        "phone": "(03)3315091",
        "address": "桃園市桃園區縣府路二二號二樓",
        "masksLeft": 201,
        "childMasksLeft": 0,
        "opensOn": [
            "休息",
            "上午、下午、晚上",
            "上午、下午、晚上",
            "上午、下午、晚上",
            "上午、下午、晚上",
            "上午、下午、晚上",
            "上午、下午"
        ],
        "note": "口罩販賣時段:週一至五中午12:30至14:30，週六13:00至15:00",
        "updatedAt": "2020-04-01T10:47:40.000Z"
    }
}

[mingjunlu]

檔案 /src/components/SymbolLayer/SymbolLayer.js 第 18 行：

const { geometry, id } = event.features[0];
// id: undefined

如果點維昌藥師藥局的話，拿到的 id 會是 undefined，
但若點附近其他地點的話，則可以正常拿回全數字的 id。

改從 feature.properties.id 下手就可以正常拿到機構代碼：

const { geometry, properties: { id } } = event.features[0];
// id: 593201A542

感覺是 mapbox-gl-js 或 react-mapbox-gl 這兩個套件其中一個有狀況 😔

[mingjunlu]

看來 mapbox-gl-js 似乎會嘗試把 ID 轉成數字，造成 ID 含有英文的地點因轉換失敗而變成 undefined 😅