前言
還記得前幾天我用signal包了react用的vue hook套件嗎？才講完沒試過兩天就出事了
不過好里加在不是什麼大包，事情是這樣的
內文
有個Android 8 chrome 70 webview的用戶(簡單說就是android的webview)回報資料顯示有問題，我看這版本起碼也是七八年前的產品，但照道理來說都已經支援Proxy了怎麼可能會出什麼大錯，再track bug的過程中發現，我寫的資料陣列被過濾掉了
const buildPaymentDataByCType = (paymentConfig) => {
// payment is proxy object
const payment = initData.withdrawList.find((x) => x.CType === paymentConfig.C_TYPE)
// console.log(payment) // exists
return
{
... payment,
// ellipsis
},
)
}
const normalWayPlatforms = computed(() =>
[
buildPaymentDataByCType(ORDER_PAYMENT.BANK),
].filter((x) => x.Name)
)
console.log(normalWayPlatforms.length) // 0？？
我在console.log(payment)都是有東西的，理論上應該都要找得到相對應物件，但為什麼會被filter掉，所以我試著不要filter直接在console.log出來，發現問題出在{...x}擴展運算子並沒有生效！！
難道是老舊瀏覽器不支援這ES6語法？所以我又隨便寫了一個
const a = { a: "a" }
console.log({ ...a })
發現這樣寫是正常的，所以應該只是因為Proxy，所以多了一層，然後擴展運算子當時還不支援擴展Proxy，94這麽簡單。那這樣要怎麼搞定呢？
我嘗試一下Object.assign還是可以把Proxy擴展出來，所以就改成這樣
const buildPaymentDataByCType = (paymentConfig) => {
const payment = initData.withdrawList.find((x) => x.CType === paymentConfig.C_TYPE)
return Object.assign(
{
// ellipsis
},
payment
)
}
ＯＫ打玩收工
後記
過程中我有嘗試用lagacy plugin把程式碼轉成es5但似乎都沒有成功，vite似乎不希望程式碼可以編譯到es6以下，總之vite還是有他不方便的地方啊，祝大家都可以準時下班～
